附件列表html:
<div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header" style="background-color: #e6e6e6">接管附件<span style="color:#1E9FFF;size: 10px;"> (接管的证明文件)</span></div> <div class="layui-card-body" style="height: 100px;"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="attachment-upload">上传图片</button> <div class="layui-upload-list"> <table class="layui-table"> <thead> <tr><th>文件名</th> <th>状态</th> <th>操作</th> </tr></thead> <tbody id="attachmentList"></tbody> </table> </div> </div> </div> </div> </div>js 局部：
var attachmentList = []; var attachmentListView = $('#attachmentList') var uploadListIns = upload.render({ elem: '#attachment-upload' ,url: ctx+'/upload/uploadImages' ,accept: 'images' ,acceptMime: 'image/*' ,exts: 'jpg|jpeg|png|bmp|gif' //只容许上传压缩文件 ,multiple: true ,choose: function(obj){ var files = this.files = obj.pushFile(); //将每次抉择的文件追加到文件队列 //读取本地文件 obj.preview(function(index, file, result){ var tr = $(['<tr id="upload-'+ index +'">' ,'<td><a href="#" style="color:#1E9FFF" id="img_open_'+index+'" data-url="">'+ file.name +'</a></td>' ,'<td>待上传</td>' ,'<td>' ,'<button class="layui-btn layui-btn-mini test-upload-demo-reload layui-hide">重传</button>' ,'<button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete">删除</button>' ,'</td>' ,'</tr>'].join('')); //单个重传 tr.find('.test-upload-demo-reload').on('click', function(){ obj.upload(index, file); }); tr.find("a#img_open_"+index).on('click',function () { var url = $(this).attr("data-url"); if(url){ window.open(url); } }) //删除 tr.find('.test-upload-demo-delete').on('click', function(){ delete files[index]; //删除对应的文件 tr.remove(); attachmentList.splice(index,1); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，免得删除后呈现同名文件不可选 }); attachmentListView.append(tr); }); } ,done: function(res, index, upload){ if(res.code == 0){ //上传胜利 var tr = attachmentListView.find('tr#upload-'+ index) ,tds = tr.children(); var attachmentData = res.data; tds.eq(0).find("a#img_open_"+index).attr("data-url",attachmentData.url); tds.eq(1).html('<span style="color: #5FB878;">已上传</span>'); tds.eq(2).find('.test-upload-demo-reload').addClass('layui-hide'); //重传操作hide attachmentList.push(attachmentData.url); return delete this.files[index]; //删除文件队列曾经上传胜利的文件 } this.error(index, upload); } ,error: function(index, upload){ var tr = attachmentListView.find('tr#upload-'+ index) ,tds = tr.children(); tds.eq(1).html('<span style="color: #FF5722;">上传失败</span>'); tds.eq(2).find('.test-upload-demo-reload').removeClass('layui-hide'); //显示重传 } });当附件从后盾申请，(即已有数据)，
从新渲染table的办法:
var active = { setAttachmentListView:function(_attachmentList){ $.each(_attachmentList,function (index,item) { var tr = $(['<tr id="upload-'+ index +'">' ,'<td><a href="#" style="color:#1E9FFF" id="img_open_'+index+'" data-url="'+item+'">附件'+ (index+1) +'</a></td>' ,'<td>已上传</td>' ,'<td>' ,'<button class="layui-btn layui-btn-mini layui-btn-danger test-upload-demo-delete">删除</button>' ,'</td>' ,'</tr>'].join('')); //单个重传 tr.find('.test-upload-demo-reload').on('click', function(){ obj.upload(index, file); }); tr.find("a#img_open_"+index).on('click',function () { var url = $(this).attr("data-url"); if(url){ window.open(url); } }) //删除 tr.find('.test-upload-demo-delete').on('click', function(){ tr.remove(); attachmentList.splice(index,1); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，免得删除后呈现同名文件不可选 }); attachmentListView.append(tr); }); }, };