附件列表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 rel="nofollow" href="#" style="color:#1E9FFF" id="img_open_'+index+'" data-url="">'+ +'</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 rel="nofollow" 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);
});
},
};