php 获取layui多文件,Layui多文件上传获取进度回调【原创】

默认的回调只针对于单一文件上传，不适用于多文件上传，要支持多文件需要对upload.js做一些简单的修改。首先利用编辑器追踪到upload.js文件(下面这段代码位置)，然后开始新增两段代码(有注释的为新增代码)。layui.each(o, function(e, o) {

var r = new FormData;

var id=e;//此变量为区分上传单位的id

r.append(l.field, o), layui.each(l.data, function(e, t) {

t = "function" == typeof t ? t() : t, r.append(e, t)

}), t.ajax({

url: l.url,

type: "post",

data: r,

contentType: !1,

processData: !1,

dataType: "json",

headers: l.headers || {},

success: function(t) {

i++, d(e, t), u()

},

error: function() {

n++, a.msg("请求上传接口出现异常"), m(e), u()

},

xhr: function() {

var e = new XMLHttpRequest;

return e.upload.addEventListener("progress", function(e) {

if (e.lengthComputable) {

e.id=id;//将当前id赋值到e对象，也可新增一参数单独传

/**var k=id;**/单独传

var t = Math.floor(e.loaded / e.total * 100);

"function" == typeof l.progress && l.progress(t, e/*,k*/)

}

}), e

}

})

})

修改完后即可在进度回调函数做对应处理，下面是多文件上传完整代码html>

Layui

.layui-progress-big{width: 500px}

高级应用：制作一个多文件列表

选择多文件

文件名进度大小状态操作

开始上传

layui.use(['upload','element'], function(){

var upload = layui.upload;

var element = layui.element;

var aa={};

//多文件列表示例

var demoListView = $('#demoList')

,uploadListIns = upload.render({

elem: '#testList'

,field:'img'

,url: ""

,accept: 'file'

,multiple: true

,auto: false

,bindAction: '#testListAction'

,choose: function(obj){

var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

//读取本地文件

obj.preview(function(index, file, result){

var tr = $(['

'

,'

'+ file.name +''

,"

\n" +

"

"

"

,'

'+ (file.size/1014).toFixed(1) +'kb'

,'

等待上传'

,'

'

,'重传'

,'删除'

,'

'

,'

'].join(''));

//单个重传

tr.find('.demo-reload').on('click', function(){

obj.upload(index, file);

});

//删除

tr.find('.demo-delete').on('click', function(){

delete files[index]; //删除对应的文件

tr.remove();

uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选

});

demoListView.append(tr);

element.render();

});

}

,allDone: function(obj){ //当文件全部被提交后，才触发

}

,progress: function(n,index){

var percent = n + '%' //获取进度百分比

element.progress(index.id, percent); //可配合 layui 进度条元素使用

}

,done: function(res, index, upload){

if(res.code == 0){ //上传成功

var tr = demoListView.find('tr#upload-'+ index)

,tds = tr.children();

tds.eq(3).html('上传成功');

tds.eq(4).html(''); //清空操作

return delete this.files[index]; //删除文件队列已经上传成功的文件

}

this.error(index, upload);

}

,error: function(index, upload){

var tr = demoListView.find('tr#upload-'+ index)

,tds = tr.children();

tds.eq(3).html('上传失败');

tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传

}

});

});

。