js文件異步上傳進度條

進度條的應用是爲了顯示的告訴用戶文件上傳了多少，對於小文件的上傳基本上應用不到進度條。進度條主要應用於大文件的上傳，在於告訴用戶上傳狀況，不至於讓用戶無狀態等待，增長了用戶的體驗，若是沒有進度條，在上傳過程當中，用戶不知道是否是卡死了，這種體驗就不好了，下面咱們來講一下如何在異步上傳時顯示進度條。

其實不管是原生js寫xhr，仍是jq的ajax，仍是axios的異步都提供了一個獲取上傳進度的API，首先咱們來看一下原生js如何獲取上傳進度。下面的示例代碼中，異步上傳均採用formData的形式來上傳。

原生js獲取上傳進度

var fd = new FormData();
fd.append("file", document.getElementById('testFile').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "http://127.0.0.1:3003/useasync/uploadFile");//修改爲本身的接口
xhr.send(fd);

function uploadProgress(evt){
	if (evt.lengthComputable) {
            var percent = Math.round(evt.loaded * 100 / evt.total);

            document.getElementById('progress').innerHTML = percent.toFixed(2) + '%';//設置進度顯示百分比
            document.getElementById('progress').style.width = percent.toFixed(2) + '%';//設置完成的進度條寬度
        }
        else {
            document.getElementById('progress').innerHTML = 'unable to compute';
        }
}

複製代碼

這裏只寫了一個獲取上傳進度的示例方法，其原理就是註冊監聽事件，其餘的例如error，load等方法相似，感興趣的能夠寫出來進行打印輸入一番，看看輸出結果就一目瞭然了。

JQ獲取上傳進度

jq並無直接提供uploadProgress方法，可是他提供了一個xhr參數,使用方法以下：

var fd = new FormData();
fd.append("file", document.getElementById('testFile').files[0]);
 $.ajax({ 
        url:'http://127.0.0.1:3003/useasync/uploadFile', 
        type: 'POST',                        
        contentType:"multipart/form-data", 
        data: fd,                        
        xhr:function(){ 
        	myXhr = $.ajaxSettings.xhr(); 
       		if(myXhr.upload){ // check if upload property exists 
           	myXhr.upload.addEventListener('progress',function(e){ 
                 var loaded = e.loaded;//已經上傳大小狀況
                 var tot = e.total;//附件總大小
                 var per = Math.floor(100*loaded/tot).toFixed(2); 
                 $("#progress").html( per +"%" );//設置進度顯示百分比
                 $("#progress").css("width" , per +"%"); //設置完成的進度條寬度
                
             }, false); // for handling the progress of the upload
        	}	  
     	 return myXhr;  
  		},
	  success:function(data){
	         console.log(data);
	         console.log("上傳成功!!!!");
	  },
	  error:function(){
	         console.log("上傳失敗！");
	    } 
});   
複製代碼

axios獲取上傳進度

在axios中提供了一個參數onUploadProgress，有了這個參數就能夠很方便的獲取上傳進度了，其方法實現仍是和原生js的同樣，這個參數其實就是註冊一個監聽事件：

var fd = new FormData();
fd.append("file", document.getElementById('testFile').files[0]);
axios({
    method:"post",
    url:"http://127.0.0.1:3003/useasync/uploadFile",
    data: fd,
    onUploadProgress:this.uploadProgress
}).then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})
uploadProgress(evt){
	if (evt.lengthComputable) {
	    var percent = Math.round(evt.loaded * 100 / evt.total);

	    document.getElementById('progress').innerHTML = percent.toFixed(2) + '%';//設置進度顯示百分比
	    document.getElementById('progress').style.width = percent.toFixed(2) + '%';//設置完成的進度條寬度
	}
	else {
	    document.getElementById('progress').innerHTML = 'unable to compute';
	}
}
複製代碼

如此，三種實現異步上傳文件的進度條方法已經說完了，至於頁面顯示上其實就是兩個div嵌套了，id爲progress的進度，不斷改變寬度，直至100%。

後記

原文章發表自：js文件異步上傳進度條