layui上传组件整合进度条

浅浅的花香味﹌ 2022-05-15 22:45 376阅读 0赞

###  1、layui进度条样式 ： ###

参照官网[http://www.layui.com/demo/progress.html][http_www.layui.com_demo_progress.html]

### 2、页面代码： ###

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

参考：[https://www.cnblogs.com/xiaohuochai/p/6036475.html][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][https_blog.csdn.net_lin452473623_article_details_80785180]

[http_www.layui.com_demo_progress.html]: http://www.layui.com/demo/progress.html
[https_www.cnblogs.com_xiaohuochai_p_6036475.html]: https://www.cnblogs.com/xiaohuochai/p/6036475.html
[https_blog.csdn.net_lin452473623_article_details_80785180]: https://blog.csdn.net/lin452473623/article/details/80785180