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文件异步上传进度条