https://blog.csdn.net/Irene1991/article/details/80773346?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158589924619725256747357%2522%252C%2522scm%2522%253A%252220140713.130056874..%2522%257D&request_id=158589924619725256747357&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-blog_SOOPENSEARCH-2

在前面本人博客的基础上，对进度条进行优化。

优化点：

之前的进度条过于真实，前端数据处理完成，没有考虑后端数据是否处理完。这样一旦后端出错导致前端操作失败，而前端进度条又走到底了，很容易给用户错误的引导。

本次改进，前端进度条人为设置最大值为98%，直到收到后端处理完成的信息后，再将进度条走到100%。

之所以不在前面博客里面修改而重新写一篇文章，是因为这篇博客中的做法需要后端同事配合。万一你遇到的同事，死活不给你返回信息，你就只能退而求其次将就了。

正文

from

上传关键js

//图片上传
$(".newFile").on('change', function(e){
       var userName=$(this).parents(".modal-content").find("input[name='name']").val();
       if(userName == ""){
           parent.layer.msg("必须先填写姓名！");
           document.getElementById("myModal_add_form").reset();
           return
       }else{
           if(Math.round(Number(e.currentTarget.files[0].size)/1024) > 10240){
           parent.layer.msg("图片太大，请压缩大小后上传！图片最大 10 MB！");
               document.getElementById("myModal_add_form").reset();
               return
           }else{
           var activityId = $("#searchForm").find("select[name='activeId']").val();
           var fileObj = e.currentTarget.files[0]; // js 获取文件对象
           var name = e.currentTarget.files[0].name;
           $(".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").attr("data-name",name);
           var url="/faceRecognition/activityManage/uploadImg?name="+userName+"&activityId="+activityId;

           var form = new FormData(); // FormData 对象
           form.append("file", fileObj); // 文件对象

           var xhr;
           xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
           xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。

           xhr.onload = uploadComplete; //请求完成
           xhr.onerror = uploadFailed; //请求失败

           xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
           xhr.upload.onloadstart = function(){//上传开始执行方法
           ot = new Date().getTime(); //设置上传开始时间
           oloaded = 0;//设置上传开始时，以上传的文件大小为0
           };
           xhr.send(form); //开始上传，发送form数据

           //显示进度条
           $("#myModal_add_progressBar_Module").css("display","block");
           }
       }
});

//上传成功响应
function uploadComplete(evt){
//服务器接收完文件返回的结果
       var res=JSON.parse(evt.target.responseText);
       if(res.code == 0){
           //上传成功
           $(".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").val(res.data.url);
           $(".newFile").parents("div.col-sm-10").find("input[name='userId']").val(res.data.id);
           $(".newFile").parents("div.col-sm-10").find("input[name='faceId']").val(res.data.faceId);

           //进度条设置为100%；
           $("#myModal_add_progressBar").css("width","100%");
           $("#myModal_add_progressBar").html("100%");
       }
}
//上传失败
function uploadFailed(evt){
parent.layer.msg("上传失败");
}
//上传进度实现方法，上传过程中会频繁调用该方法
function progressFunction(evt) {
// event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
if (evt.lengthComputable) {
           //进度条限制上传时永远不能达到100% 最大98% 除非收到后端返回值才设置为100%
$("#myModal_add_progressBar").css("width", Math.floor(evt.loaded / evt.total * 100)-2 + "%");
$("#myModal_add_progressBar").html(Math.floor(evt.loaded / evt.total * 100)-2 + "%");
}
var nt = new Date().getTime();//获取当前时间
var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为s
ot = new Date().getTime(); //重新赋值时间，用于下次计算
var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
}

真实的进度条进阶

正文

from

上传关键js

猜你喜欢