layui upload上传文件列表展示进度条

layui upload上传文件列表展示进度条layui upload上传文件列表展示进度条

 

在layui 模块upload.js里面

layui upload上传文件列表展示进度条

 

layui upload上传文件列表展示进度条

 <div class="layui-progress" file-sort="'+sort+'" lay-showpercent="true" lay-filter="progress-'+index+'">\n' +
'                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>\n' +
'                </div>' +

 

layui upload上传文件列表展示进度条

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: xhrOnProgress
,progress:function (n,obj) {
    $("#uploadFile").find('.layui-progress').each(function () {
        if ( $(this).index() == $(this).attr("file-sort")) {
            let progressBarName = $(this).attr("lay-filter");
            element.progress(progressBarName, n + '%');//设置页面进度条
        }
    });
}