<!--#
|
var name = name!"attachement";
|
var uploadURL = ctxPath+"/core/file/uploadAttachment.json";
|
var chooseId = name+"List";
|
var uploadId = name+"ListAction";
|
var filesListId = name+"DataList";
|
//加载已经在数据库列表
|
var files = (isNew=="true")?[]:core.file(batchFileUUID);
|
|
-->
|
<div class="layui-upload">
|
<input type="hidden" name="${name}" value="${batchFileUUID}" ${isNotEmpty(layVerify)?('lay-verify="'+layVerify+'"'):''} />
|
<button type="button" class="layui-btn layui-btn-normal"
|
id="${chooseId}">选择多文件</button>
|
|
<button type="button" class="layui-btn" id="${uploadId}">开始上传</button>
|
<div class="layui-upload-list">
|
<table class="layui-table">
|
<thead>
|
<tr>
|
<th>编号</th>
|
<th>文件名</th>
|
<th>状态</th>
|
<th>操作</th>
|
</tr>
|
</thead>
|
<tbody id="${filesListId}">
|
<!--# for(file in files){ -->
|
<tr>
|
<td>${file.id}</td>
|
<td>${file.name}</td>
|
<td>成功</td>
|
<td>
|
|
<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>
|
<button class="layui-btn layui-btn-mini demo-preview">预览</button>
|
<button class="layui-btn layui-btn-mini demo-download">下载</button>
|
</td>
|
</tr>
|
<!--# } -->
|
</tbody>
|
</table>
|
</div>
|
|
</div>
|
|
<script>
|
var previewStr = '<button class="layui-btn layui-btn-mini demo-preview">预览</button>';
|
var deleteStr = '<button class="layui-btn layui-btn-mini demo-delete layui-btn-danger">删除</button>';
|
var downloadStr ='<button class="layui-btn layui-btn-mini demo-download">下载</button>'
|
layui.use('upload',
|
function() {
|
var $ = layui.jquery,
|
upload = layui.upload;
|
var demoListView = $('#${filesListId}'),
|
uploadListIns = upload.render({
|
elem: '#${chooseId}',
|
url: '${uploadURL}',
|
accept: 'file',
|
multiple: true,
|
auto: false,
|
data: {
|
"batchFileUUID": "${batchFileUUID}",
|
"bizId":"${bizId!}",
|
"bizType":"${bizType}"
|
},
|
bindAction: '#${uploadId}',
|
choose: function(obj) {
|
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
|
//读取本地文件
|
obj.preview(function(index, file, result) {
|
var tr = $(['<tr id="${name}Upload-' + index + '">', '<td></td>', '<td>' + file.name + '</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-mini layui-btn-danger demo-cancel">取消</button>', '</td>', '</tr>'].join(''));
|
//单个重传
|
tr.find('.demo-reload').on('click',
|
function() {
|
obj.upload(index, file);
|
});
|
|
//取消
|
tr.find('.demo-cancel').on('click',
|
function() {
|
delete files[index]; //删除对应的文件
|
tr.remove();
|
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
|
});
|
|
demoListView.append(tr);
|
});
|
},
|
done: function(res, index, upload) {
|
if (res.code != 0) {
|
this.error(index, upload);
|
return
|
} //上传成功
|
var tr = demoListView.find('tr#${name}Upload-' + index),
|
tds = tr.children();
|
tds.eq(0).html( res.data.id);
|
tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
|
tds.eq(3).html(deleteStr+previewStr +downloadStr); //清空操作
|
initTr(tr);
|
return delete this.files[index]; //删除文件队列已经上传成功的文件
|
},
|
error: function(index, upload) {
|
var tr = demoListView.find('tr#${name}upload-' + index),
|
tds = tr.children();
|
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
|
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
|
}
|
});
|
|
var trs = demoListView.children();
|
for (var i = 0; i < trs.length; i++) {
|
initTr($(trs[i]));
|
}
|
|
function initTr(tr) {
|
var tds = tr.children();
|
var fileId = tds.eq(0).html();
|
var fileName= tds.eq(1).html();
|
tr.find('.demo-delete').on('click',function() {
|
|
Common.post("/core/file/deleteAttachment.json", {
|
"fileId": fileId,
|
"batchFileUUID": "${batchFileUUID}"
|
},
|
function() {
|
tr.remove();
|
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
|
Common.info("删除成功");
|
});
|
return false;
|
|
});
|
//预览服务器文件
|
tr.find('.demo-preview').on('click',
|
function() {
|
//文件下载地址
|
var file = encodeURIComponent("http://" + window.location.host+"/core/file/download/"+fileId+"/${batchFileUUID}/"+fileName);
|
//8012为预览服务器地址,参考 https://gitee.com/kekingcn/file-online-preview 安装
|
Common.topOpenDlg("${env('file.previewURL')}?url="+file,fileName+"预览");
|
//window.open("${env('file.previewURL')}?url="+file,fileName+"预览");
|
return false;
|
});
|
|
//下载服务器文件
|
tr.find('.demo-download').on('click',
|
function() {
|
//文件下载地址
|
var address = "${ctxPath}/core/file/download/"+fileId+"/${batchFileUUID}/"+fileName;
|
console.log(address);
|
window.location.href=address;
|
return false;
|
});
|
}
|
|
});
|
</script>
|