Files.Table

<div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-files">选择多文件</button> <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> <th>文件名</th> <th>大小</th> <th>上传进度</th> <th>操作</th> </thead> <tbody id="ID-upload-demo-files-list"></tbody> </table> </div> <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button> </div> <!-- import layui --> <script> layui.use(function(){ var upload = layui.upload; var element = layui.element; var $ = layui.$; // 制作多文件上传表格 var uploadListIns = upload.render({ elem: '#ID-upload-demo-files', elemList: $('#ID-upload-demo-files-list'), // 列表元素对象 url: '', // 实际使用时改成您自己的上传接口即可。 accept: 'file', multiple: true, number: 3, auto: false, bindAction: '#ID-upload-demo-files-action', choose: function(obj){ var that = this; var files = this.files = 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><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>', '<td>', '<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('')); // 单个重传 tr.find('.demo-reload').on('click', function(){ obj.upload(index, file); }); // 删除 tr.find('.demo-delete').on('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){ // 上传成功 var tr = that.elemList.find('tr#upload-'+ index) var tds = tr.children(); tds.eq(3).html(''); // 清空操作 delete this.files[index]; // 删除文件队列已经上传成功的文件 return; //} 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 即为返回的进度百分比 } }); }); </script>