本文共 2465 字，大约阅读时间需要 8 分钟。

Layui如何使用上传进度？

无需任何修改，几行代码即可实现上传进度条！

直接上代码

   
   
	
    
	    
     
	    
    
	
    
	
     确定	
    
   

layui.use(['element', 'upload'], function () {        var upload = layui.upload,        element = layui.element,$=layui.$;        element.init();             //创建监听函数        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;            }      }                upload.render({            elem: '#js_upload',            url: gContextPath+"/uploadfile2.htm"            ,multiple: false            ,before:function(){                element.progress('js_upload_progress', '0%');//设置页面进度条                    var tindex = layer.open({                        type: 1,                        title: '上传进度',                        closeBtn: 1, //不显示关闭按钮                        area: ['300px', '170px'],                        shadeClose: false, //开启遮罩关闭                        content: $("#uploadLoadingDiv").html(),                        offset: '100px'                    });                   //关闭进度条提示                    $(document).on('click','.js_upload_progress_bar_sure',function(){                        layer.close(tindex );                     });                    }            ,xhr:xhrOnProgress            ,progress:function(value){//上传进度回调 value进度值                element.progress('js_upload_progress', value+'%');//设置页面进度条            }            ,field: 'file'            , accept: 'images'            , data: {                "index": 1,                "appCbnid":""            },            accept: 'file',            //普通文件            done: function (res) {                console.log(res);                $(".js_upload_file_name").val(res[0].data.filename);                $(".js_resource_invite_file_id").val(res[0].data.fid);            },            error: function () {                layer.alert("上传失败",{offset: '100px'});                return false;            }        });             });

转载地址：http://porxf.baihongyu.com/