js文件异步上传进度条

OECOM

发布于 2020-07-02 11:48:53

9.9K0

发布于 2020-07-02 11:48:53

文章被收录于专栏：OECOMOECOM

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

其实无论是原生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%。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-02-14，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript