layui多⽂件上传分别显⽰对应⽂件的进度
1、⽂件上传回调为 layui 2.5.5 新增，下载2.5.5以上版本
2、修改lay modules模块下的upload.js⽂件（代码格式后修改），参考链接如下(2021年访问要注册)：
3、逻辑js代码参考如下，本地测试上传⼤⽂件可以⽐较容易看到进度条效果，不太确定上传⽂件进度是不是指加载好⽂件的进度，因为⽂件上传进度为100%时，还要需要⼀定时间等待服务器响应返回结果，所以下⾯代码处理为当⽂件进度为100%时，⼈⼯显⽰99%，当对应⽂件的上传请求完毕后done时才把进度显⽰为100%，当全部⽂件上传完毕再取消上传⽂件显⽰的loading，删除进度条。
var progressTpl = '<div class="layui-progress layui-progress-big mb5 progress-item" lay-filter="" lay-showpercent="yes"><div class="layui-progress-ba
var loadIndex = 0;
var multifileView = $('#upBGFileList')
, uploadListIns = der({
elem: '#upBGFile'
, url: '/upload/kindeditorJson'
, accept: 'file'
, multiple: true
,before: function(obj){ //obj参数包含的信息，跟 choose回调完全⼀致
loadIndex = layLoading(2, sc); //显⽰上传loading 封装函数可以⾃⼰写
}
,progress: function(n, elem, e, index){
var layId = "progress"+index;
if($("#progress"+index).length == 0){
var $progress = $(progressTpl);
$progress.attr("id", layId);
$progress.attr("lay-filter", layId);
$(elem).before($progress);
}
var percent = n + '%'; //获取进度百分⽐
if(n > 99){
//element.progress(layId, "99%"); //可配合 layui 进度条元素使⽤
$("#" + layId).find(".layui-progress-bar").attr("lay-percent", "99%");
}else{
//element.progress(layId, percent); //可配合 layui 进度条元素使⽤
$("#" + layId).find(".layui-progress-bar").attr("lay-percent", percent);
}
}
, done: function (res, index, upload) {
if ( == 0) { //上传成功
//这⾥的index和progress那⾥新加的index值⼀样
element.progress("progress"+index, "100%");
$("#progress"+index).find(".layui-progress-bar").attr("lay-percent", "100%");
//do something
return;
}
<(index, upload);
}
, error: function (index, upload) {
return layer.msg(commStr.wjscsb);
}
layui下载,allDone: function(obj){ //当⽂件全部被提交后，才触发
$(".progress-item").remove();
closeLayLoading(loadIndex); //关闭loading
al == obj.successful){
layer.msg(commStr.sccg);
}else{
layer.msg(commStr.sccgwjsl + ": " + obj.successful + ", " + commStr.scsbwjsl + ": " + obj.aborted);
}
}
});
还有⼀个点是这⾥的进度条动态改变百分⽐要这样⼦写才有正确显⽰百分⽐值⽂字效果：
$("#" + layId).find(".layui-progress-bar").attr("lay-percent", percent);
4、⽬前实现不了多⽂件上传的总进度条，因为多⽂件上传choose⽂件之后预览preview⽂件也有时间差，progress那⾥也是，导致前⾯的⼩⽂件很快进度100%，但是⼤⽂件还没识别到，设置setTimeout也不⾏。
有实现总进度条的求推荐。
歪特、snowballpower

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。