layui多文件上传表格

{layout name="layout" /}<style>.ellipsis-cell {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.fixed-table {table-layout: fixed;}
</style><div class="layui-card"><form class="layui-card-body layui-form"><div class="layui-form-item"><div class="layui-form-label required">项目名称</div><div class="layui-input-block"><span class="layui-form-mid">{$project.title}</span></div></div>{:input2('附件名称','title',$row.title,'required')}<div class="layui-form-item"><label class="layui-form-label required">文件列表</label><div class="layui-input-block"><button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="choose-btn">选择文件</button><div class="layui-upload-list"><table class="layui-table fixed-table" lay-size="sm"><colgroup><col><col width="80"><col width="60"><col width="80"><col width="100"></colgroup><thead><tr><th>文件名</th><th>大小</th><th>扩展名</th><th>上传进度</th><th>操作</th></tr></thead><tbody id="upload-files">{volist name="row.files_arr" id="vo"}<tr><td data-src="{$vo.src}" title="{$vo.name}" class="ellipsis-cell">{$vo.name}</td><td>{$vo.size}</td><td>{$vo.ext}</td><td><div class="layui-progress"><div class="layui-progress-bar" lay-percent="100%"></div></div></td><td><div class="layui-btn-group"><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button><a href="{$vo.src}" target="_blank" class="layui-btn layui-btn-xs">查看</a></div></td></tr>{/volist}</tbody></table></div><button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="upload-btn">开始上传</button></div></div>{:switch2('是否披露','is_show',$row.is_show)}{:submit2('提交','id',$row.id)}<input type="hidden" name="project_id" value="{$project.id}"></form>
</div><script>function main() {var uploadListIns = upload.render({elem: '#choose-btn', elemList: $('#upload-files'), bindAction: '#upload-btn', url: '/upload/index', data: { 'path': '/project/' }, accept: 'file', multiple: true, number: 10, auto: false, choose: function (obj) {var that = thisvar files = this.files = obj.pushFile()obj.preview(function (index, file, result) {var tr = $(['<tr id="file-' + index + '">', '  <td title="' + file.name + '" class="ellipsis-cell">' + file.name + '</td>', '  <td>' + (file.size / 1024).toFixed(1) + 'kb</td>', '<td>' + file.ext + '</td>', '  <td><div class="layui-progress" lay-filter="progress-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>', '  <td>', '    <div class="layui-btn-group">', '      <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>', '      <button type="button" class="layui-btn layui-btn-xs layui-hide reload">重试</button>', '    </div>', '  </td>', '</tr>'].join(''))// 单个重传tr.find('.reload').on('click', function () {obj.upload(index, file)})// 删除tr.find('.delete').on('click', function () {delete files[index]tr.remove()uploadListIns.config.elem.next()[0].value = ''})that.elemList.append(tr)element.render('progress')})}, done: function (res, index, upload) {var that = thisif (res.ok == 1) {var tr = that.elemList.find('tr#file-' + index)var tds = tr.children()tds.eq(0).data('src', res.data.fullSrc)tds.eq(4).find('.reload').remove()tds.eq(4).find('.layui-btn-group').append('<a href="' + res.data.fullSrc + '" target="_blank" class="layui-btn layui-btn-xs">查看</a>')delete this.files[index]return}this.error(index, upload)}, allDone: function (obj) {// console.log(obj)}, error: function (index, upload) {var that = thisvar tr = that.elemList.find('tr#file-' + index)var tds = tr.children()tds.eq(4).find('.reload').removeClass('layui-hide')element.progress('progress-' + index, '0%')}, progress: function (n, elem, e, index) {element.progress('progress-' + index, n + '%')}})$('.delete').on('click', function () {$(this).parents('tr').remove()})form.on('submit(*)', function (e) {// 判断 uploadListIns.config.files 是否有子元素var filesObj = uploadListIns.config.files || {};var hasFiles = Object.keys(filesObj).length > 0;console.log('是否有子元素:', hasFiles, filesObj);if (hasFiles) {layer.msg('有选择的文件尚未上传', { icon: 5 });return false;}// 获取上传的文件列表var files = []$.each($('#upload-files').children('tr'), function (i, v) {var tds = $(v).children()var src = tds.eq(0).data('src')var name = tds.eq(0).text()var size = tds.eq(1).text()var ext = tds.eq(2).text()if (src) {files.push({ src: src, name: name, size: size, ext: ext })}})if (files.length == 0) {layer.msg('请上传附件', { icon: 5 })return false}e.field.files = JSON.stringify(files)e.field.is_show = e.field.is_show == 'on' ? 1 : 0console.log(e.field)submit('', e)return false})}
</script>