layui扩展上传组件真实进度条（转载）

转载地址：https://blog.csdn.net/lin452473623/article/details/80785180

测试说，请改成真实进度条，于是我#？￥@#，碎碎念一个小时之后还是只能怂怂的改。参考了https://www.cnblogs.com/youmingkuang/p/9183528.html，说得非常详细，一改就通，做个记录，以下是代码：

<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>
    <form class="layui-form" enctype="multipart/form-data">
        <div class="layui-form-item layui-upload">
	     <span id="uploadName" style="line-height: 3;"></span>
	     <button type="button" class="layui-btn layui-btn-normal" id="test8" style="float: right;"><i class="layui-icon"></i></button>
        </div>
        <div class="layui-form-item">
	    <div class="layui-input-block">
	        <input type="radio" name="upgradeType" value="30011001" title="手动升级">
	        <input type="radio" name="upgradeType" value="30011002" title="自动升级" checked>
	     </div>
        </div>
        <div class="layui-form-item">
	    <div class="layui-input-block">
	        <a class="roundCornerDiv aLineGray" href="javascript:layer.closeAll();">
		    <span type="reset" class="ButtonText popupCloseBtn">取消</span>
	        </a>
	        <a class="roundCornerDiv aLineOrange">
	            <button class="ButtonText submitBtn" type="button" id="test9">立即提交</button>
	        </a>  
	    </div>
        </div>
     </form>
</div>

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

以下代码也需要放到上面js所在文件中

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

然后，还需要改动layui文件夹下modules文件夹中upload.js中代码，按照参考文档中写法会报options is undefined错误，查看upload.js代码中上下文后稍做修改后可以实现，以下是修改过后代码，若运行报l is undefined错误，可以搜索源文件ajax，查看"url:"后用的是什么参数，将添加的代码中也修改为相同参数即可，找到该文件中ajax部分，添加下列代码中标注了是新功能部分：

$.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();
     }
});

然后运行起来，就是一个完美的实时进度条啦~
--------------------- 
作者：lin452473623 
来源：CSDN 
原文：https://blog.csdn.net/lin452473623/article/details/80785180