javascript ·

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){ // 检测 upload 属性是否存在
            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);
            }
         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%。

参与评论