进度条的应用是为了显示的告诉用户文件上传了多少,对于小文件的上传基本上应用不到进度条。进度条主要应用于大文件的上传,在于告诉用户上传情况,不至于让用户无状态等待,增加了用户的体验,如果没有进度条,在上传过程中,用户不知道是不是卡死了,这种体验就很差了,下面我们来说一下如何在异步上传时显示进度条。
其实无论是原生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文件异步上传进度条