【layui】多文件上传组件实现

插件预览效果：

需要引入layui的脚本文件layui.js和样式文件layui.css

html代码：

<div class="layui-input-block"><div class="layui-upload-list"><table class="layui-table"><colgroup><col style="min-width: 100px;"><col width="150"><col width="260"><col width="150"></colgroup><thead><tr><th>文件名</th><th>大小</th><th>上传进度</th><th>操作</th></tr></thead><tbody id="ID-upload-demo-files-list"></tbody></table></div><button type="button" class="layui-btn layui-btn-normal" id="upload">选择多文件</button><button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
</div>

脚本代码：

//初始化组件
var uploadListIns = upload.render({elem: '#upload',elemList: $('#ID-upload-demo-files-list'), // 列表元素对象url: '/FileManage/Uploadfile/Upload', // 实际使用时改成您自己的上传接口即可。accept: 'file',multiple: true,number: 10,auto: false,bindAction: '#ID-upload-demo-files-action',data: { filetype: 3 },//接口参数choose: function (obj) {var that = this;var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列console.log('obj.pushFile()', obj.pushFile())// 读取本地文件obj.preview(function (index, file, result) {var tr = $(['<tr id="upload-' + index + '">','<td>' + file.name + '</td>','<td>' + (file.size / 1024).toFixed(1) + 'kb</td>','<td class="progressContent"><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>','<td class="operate">',// '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>','<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>','</td>','</tr>'].join(''));// 单个重传$("body").delegate('#upload-' + index + " .demo-reload", "click", function () {var progress = '<div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div>'element.progress('progress-demo-' + index, '0%');obj.upload(index, file);});// 删除$("body").delegate(".demo-delete", "click", function () {delete files[index]; // 删除对应的文件tr.remove(); // 删除表格行// 清空 input file 值，以免删除后出现同名文件不可选uploadListIns.config.elem.next()[0].value = '';});that.elemList.append(tr);element.render('progress'); // 渲染新加的进度条组件});},done: function (res, index, upload) { // 成功的回调var that = this;if (res.code == 0) { // 上传成功console.log('done-success', res, index, upload)var tr = that.elemList.find('tr#upload-' + index)var tds = tr.children();tds.eq(3).html(''); // 清空操作var td = $(['<button class="layui-btn layui-btn-xs table-preview " onclick="showAnnex(\'' + res.data[0].src + '\')">下载</button>','<button class="layui-btn layui-btn-xs layui-btn-danger table-delete">删除</button>'].join(''));$("#upload-" + index).find(".operate").empty();// console.log('$("#" + index).find(".operate")', $("#" + index).find(".operate"))$("#upload-" + index).find(".operate").append(td);$("#upload-" + index).attr("data-src", res.data[0].src)fileList.push({src: res.data[0].src,name: this.files[index].name,size: res.data[0].size,})console.log('fileList', fileList)delete this.files[index]; // 删除文件队列已经上传成功的文件return;}else {console.log('done', res, index, upload)var td = $(['<button class="layui-btn layui-btn-xs demo-reload ">重传</button>','<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'].join(''));$("#upload-" + index).find(".operate").empty();// console.log('$("#" + index).find(".operate")', $("#" + index).find(".operate"))$("#upload-" + index).find(".operate").append(td);this.error(index, upload);}},allDone: function (obj) { // 多文件上传完毕后的状态回调console.log(obj)},error: function (index, upload) { // 错误回调var that = this;var tr = that.elemList.find('tr#upload-' + index);var tds = tr.children();// 显示重传tds.eq(3).find('.demo-reload').removeClass('layui-hide');},progress: function (n, elem, e, index) { // 注意：index 参数为 layui 2.6.6 新增element.progress('progress-demo-' + index, n + '%'); // 执行进度条。n 即为返回的进度百分比}
});
//删除按钮事件
$("body").delegate(".table-delete", "click", function () {let src = $(this).parents('tr').attr("data-src")console.log('delete', src)let deleteIndex = -1;fileList.forEach(function (item, index) {if (item.src == src) {deleteIndex = index}})if (deleteIndex != -1) {fileList.splice(deleteIndex, 1)}$(this).parents('tr').remove();
});
//开始上传按钮事件
$("body").delegate("#ID-upload-demo-files-action", "click", function () {$("#ID-upload-demo-files-list tr").each(function (index, item) {if ($(item).attr("data-src") == undefined || $(item).attr("data-src") == 'undefined') {$(item).find(".operate").empty();}// console.log(' $(item).attr("src")', $(item).attr("data-src"))});
})