layui upload上传文件列表展示进度条
在layui 模块upload.js里面
<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>' +
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 + '%');//设置页面进度条 } }); }