１、項目中需要用到文件上傳和顯示進度，網上各種插件搞得頭暈，決定自己實現一個
三個步驟：Ajax上傳文件，獲取上傳進度，顯示進度
html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<form action="/upload_ajax/" enctype="multipart/form-data" method="POST">
<input type="file" id="file"/>
</form>
<button id="btn">上傳</button>
<div class="progress" style="width: 500px">
<div id="progress-bar" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<script src="/static/js/jquery-1.9.1.min.js"></script>
<script>
$(function () {
$("#btn").on('click', function () {
UploadFile();
});
$("#file").change(function () {
$("#progress-bar").css("width", 0);
});
// ajax + jQuery上傳
function UploadFile() {
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun; //綁定監聽
//使用閉包實現監聽綁
return function () {
//通過$.ajaxSettings.xhr();獲得XMLHttpRequest對象
var xhr = $.ajaxSettings.xhr();
//判斷監聽函數是否為函數
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有監聽函數並且xhr對象支持綁定時就把監聽函數綁定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var file = $("#file")[0].files[0];
var form = new FormData();
form.append('myfile', file);
form.append("csrfmiddlewaretoken", '{{ csrf_token }}');
$.ajax({
type: 'POST',
url: '/uploadFile/',
data: form,
processData: false, // 告訴jquery不轉換數據
contentType: false, // 告訴jquery不設置內容格式
xhr: xhrOnProgress(function (e) {
var percent = e.loaded / e.total;
$("#progress-bar").css("width", (percent * 500));
}),
success: function (arg) {
console.log(arg);
}
})
}
});
</script>
</body>
</html>
后台：
def upload_file(request):
if request.method == "POST": # 請求方法為POST時，進行處理
myFile = request.FILES.get("myfile", None) # 獲取上傳的文件，如果沒有文件，則默認為None
if not myFile:
return HttpResponse("no files for upload!")
destination = open(os.path.join("/root/Desktop", myFile.name), 'wb+') # 打開特定的文件進行二進制的寫操作
for chunk in myFile.chunks(): # 分塊寫入文件
destination.write(chunk)
destination.close()
return HttpResponse(myFile.name)
效果：
