layui 魔改：上传时的真实进度条

Posted 2020-12-31 foxcharon

这个问题本身不复杂，难点在于需要改 layui 的源码。

html略。

网页的JS域：

layui.use([‘upload‘,‘element‘,‘layer‘], function(){
    var upload = layui.upload,element = layui.element,layer = layui.layer;
    upload.render({
    elem: ‘#test8‘
    ,url: ‘upload‘
    ,async: false
    ,method: ‘post‘
    ,data: {
        upgradeType: function(){
        return $("input[name=‘upgradeType‘]:checked").val();
        }
    }
    ,auto: false
    ,xhr:xhrOnProgress
    ,progress:function(value){//上传进度回调 value进度值
        element.progress(‘demo‘, value+‘%‘)//设置页面进度条
    }
    ,accept: ‘file‘ //普通文件
    ,exts: ‘zip‘ //只允许上传压缩文件
    ,field:‘uploadFile‘
    ,bindAction: ‘#test9‘
    ,choose: function(obj){
        var uploadFileInput=$(".layui-upload-file").val();
        var uploadFileName=uploadFileInput.split("\");
        $("#uploadName").text(uploadFileName[uploadFileName.length-1]);
    }
    ,before: function(obj){
        layer.load(); //上传loading
    }
    ,done: function(res){
        layer.msg("上传成功");
    }
    ,error: function(index, upload){
        element.progress(‘demo‘, ‘0%‘);
        layer.msg(‘上传失败‘);
    }
    });
});

//创建监听函数
     var xhrOnProgress=function(fun) {
        xhrOnProgress.onprogress = fun; //绑定监听
         //使用闭包实现监听绑
        return function() {
            //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
            var xhr = $.ajaxSettings.xhr();
             //判断监听函数是否为函数
              if (typeof xhrOnProgress.onprogress !== ‘function‘)
                   return xhr;
               //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                      xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
         }
     }

可以考虑把 xhrOnProgress 放在一个库里面，但不知道能不能直接放到Layui的源码里面。

然后就是重点了：改 layui 源码。

upload.js : 

...
//默认配置
  Class.prototype.config = {
    accept: ‘images‘ //允许上传的文件类型：images/file/video/audio
    ,exts: ‘‘ //允许上传的文件后缀名
    ,auto: true //是否选完文件后自动上传
    ,bindAction: ‘‘ //手动上传触发的元素
    ,url: ‘‘ //上传地址
    ,field: ‘file‘ //文件字段名
    ,method: ‘post‘ //请求上传的http类型
    ,data: {} //请求上传的额外参数
    ,drag: true //是否允许拖拽上传
    ,size: 0 //文件限制大小，默认不限制
    ,number: 0 //允许同时上传的文件数，默认不限制
    ,multiple: false //是否允许多文件上传，不支持ie8-9
    ,xhr:function(){}
  };
...
$.ajax({
    url: l.url
    ,type: l.method
    ,data: formData
    ,contentType: false 
    ,processData: false
    ,dataType: ‘json‘
    ,xhr:l.xhr(function(e){//此处为新添加功能
         var percent=Math.floor((e.loaded / e.total)*100);//计算百分比
         l.progress(percent);//回调将数值返回
     })
     ,success: function(res){
         successful++;
         done(index, res);
         allDone();
     }
     ,error: function(e){
         console.log(e)
         aborted++;
         that.msg(‘请求上传接口出现异常‘);
         error(index);
         allDone();
     }
});
...

需要修改的地方标红了。

这样就完成了，写上传业务的时候不管有没有写xhr参数都可以正常提交。

参考：https://blog.csdn.net/lin452473623/article/details/80785180