LayUI实现 文件的多个上传以及回显
首先 需要创建 两个表格
一个主表 一个存储文件的表,文件的表需要设置一个外键id,来存储主表对应的主键,形成一个主表信息对应多个文件的效果。
<label class="layui-form-label">附件上传:</label>
<div class="layui-input-inline">
<button type="button" class="layui-btn" id="upload" style="background-color: #009688">
<i class="iconfont"></i>选择文件
</button>
</div>
</div>
<label class="layui-form-label"></label>
<div class="layui-input-block" id="fileList">
<#list limsBReportArchived.reportArchivedFiles as reportArchivedFile>
<div style="margin:2px 0px">
<input type="hidden" name="file_path" value="${reportArchivedFile.filePath!}">
<input type="hidden" name="file_name" value="${reportArchivedFile.originalFileName!}">
<a href="javascript:download('${reportArchivedFile.filePath!}')">${reportArchivedFile.originalFileName!}</a>
<a onclick='del(this);' title="删除">
<i class="iconfont" style="font-size: 25px;color: #ef4836;vertical-align: middle;cursor:pointer;"></i>
</a>
</div>
</#list>
</div>
-
第一步
定义一个 upload var upload = layui.upload;
第二步
调用此方法
var uploadInst = upload.render
var uploadInst = upload.render({
elem: ‘#upload’ //绑定元素
,url: ‘/repo/reportArchived/upload?id=’+uploadId //上传接口
,method: ‘POST’
,accept: ‘file’
,multiple: true
,before: function(obj){
layer.load();
}
,done: function(res){//上传完毕回调
}
,error: function(){//请求异常回调
layer.closeAll('loading');
layer.msg('网络异常,请稍后重试!');
}
});