layui上传组件整合进度条

 1、layui进度条样式 ：

<div id="uploadPatchForm" style="display:none" class="roundRect">
    <div  id="uploadLoadingDiv">
	    <div class="layui-progress" lay-showpercent="true" lay-filter="demo" >
	        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
    </div>
</div>

参照官网http://www.layui.com/demo/progress.html

2、页面代码：

监听xhr也就是XMLHttpRequest ，ajax的核心技术就是这个！！！

参考：https://www.cnblogs.com/xiaohuochai/p/6036475.html

下面是layui的上传进度展示需要依赖的函数

    //创建监听函数
     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;
         }
     }

添加了 xhr,pogress

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('上传失败');
	}
    });
});

3、修改layui源码

1. 打开layui/modules/upload.js
2. 搜索ajax 
3. 找到url:
4. 添加以下代码：

    ,xhr:l.xhr(function(e){//此处为新添加功能
            var percent=Math.floor((e.loaded / e.total)*100);//计算百分比
            l.progress(percent);//回调将数值返回
        })
   

    

5. upload.js 中 p.prototype.config也要改，加一个xhr的定义，否则传文件时如果不设xhr会报错。

   p.prototype.config={
       accept:"images",exts:"",auto:!0,bindAction:"",url:""
       ,field:"file",method:"post",data:{},drag:!0,size:0
       ,number:0,multiple:!1
       ,xhr:function(){}//此处需要添加
         },  

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