H5上傳檔案進度條
阿新 • • 發佈：2018-12-17
首先推薦一波我的網站 iscoser.com。
關於原生標籤上傳檔案，之前有寫過兩篇：分別是H5標籤上傳檔案（功能實現）和H5標籤上傳檔案（樣式美化）。
這一篇我們要講的是上傳檔案時的上傳進度監聽（進度條的實現）依賴jQuery ！。
jQuery預設使用的XMLHttpRequest物件（下文簡稱xhr）是內部生成的，要知道上傳進度我們就要監聽其xhr物件的upload屬性的變化。所以我們要解決的問題是“如何給jQuery預設生成的xhr物件繫結上我們自己寫的監聽函式”。
熱心網友們想到了一個辦法，首先封裝一個方法 傳入一個監聽函式 返回一個綁定了監聽函式的XMLHttpRequest物件。具體實現方法如下：
$.ajax({
type: "post",
url: "上傳路徑",
processData: false,
data: {},
//關鍵部分,用xhrOnProgress方法監聽xhr,並返回掛載了監聽函式的新xhr物件
xhr: xhrOnProgress(function(e) {
var percent = e.loaded / e.total;//計算百分比
console.log(percent);
}),
success: function(r) {
console.log(r);
}
});
//上傳進度監聽方法 以上部分就可以實現上傳進度的監聽了，我們在控制檯的network將我們的網速設定為fast3g來測試這個上傳的進度的變化，太快了感受不出來。列印的是變數是percent，即上傳進度百分比，這個在上面的xhrOnProgress方法裡面。測試圖如下：
注意控制檯列印的資料，就是我們的percent輸出值。
下面貼完整的程式碼，直接複製貼上可不能使用喔，但不要緊張或者咒罵這什麼垃圾玩意！你只需要修改jquery的引用路徑和上傳的地址就可以了，我在註釋裡面給你標註了。拿到了關鍵的上傳進度值，寫個進度條還不容易麼。完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX上傳檔案進度條的實現原理</title>
</head>
<body>
<input type="file" onchange="uploadFile()" />
</body>
<!--這裡要引用你自己的jquery喔 -->
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script>
function uploadFile(event) {
var e = window.event || event;
var oFile = e.target.files[0];
var oData = new FormData();
oData.append("file", oFile);
//上傳進度監聽方法
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;
}
}
$.ajax({
type: "post",
url: "",//這裡加上你自己的上傳地址
processData: false,//關閉jquery對檔案的預處理
data: oData,
xhr: xhrOnProgress(function(e) {
//關鍵資料
/*稍微處理一下，看看控制檯的列印資料就是上傳的進度，
想要看明白，就控制一下你的網速，在瀏覽器控制檯的
Network選項裡面可以選擇網速，選擇fast 3g就可以啦。*/
var percent = e.loaded / e.total;
}),
success: function(r) {
console.log(r);
}
});
}
</script>
</html>好了，全文到此結束，雖然現在是Vue、React、Angular的時代，但是jQuery真的是經典啊。又或者說，是我們這些見證著前端由jQuery到三劍客的老傢伙們的一點執念吧！正所謂老兵不死，只是凋零！
