按钮所在的层不应是form,按钮不能多次实例化,以下每次都会打开一个新窗口,此处加上限制,render只实例化一次(如果多次示例,会出现文件上传没反应,无法触发layui响应,无法上传到后台)。
以下是Html(在本人的项目中,以下的最外层div要多次弹框使用。layui.open打开该div,使用的layui的版本是2.0.2):
<div id="form" class="layui-upload" hidden="hidden">
文件名: <input type="text"
style="width: 450px;height: 25px"/>
<div class="layui-btn-group">
<button style="margin-bottom:10px" class="layui-btn layui-btn-small"
title="新建" >新建</button>
<button style="float:right;margin-bottom:10px" class="layui-btn layui-btn-small"
id="file-upload-btn" title="从文件导入">导入</button>
</div>
<div class="lineDiv">
<table class="layui-table" lay-filter=L-table">
<thead>
<tr>
<th field="name" width="40%">键</th>
<th field="name" width="40%">值</th>
<th field="name" width="20%">操作</th>
</tr>
</thead>
<tbody id="paramFile-table">
</tbody>
</table>
</div>
</div>
以下是JS:
var uploadFileBtnInstEdit;//上传文件按钮(编辑)
var uploadFileBtnInst;//上传文件按钮(新建)
layui.use('upload', function(){
if (formType == '-edit' && typeof (uploadFileBtnInstEdit) == 'undefined'){
uploadFileBtnInstEdit = initUploadFileBtnInst(formType);
}else if(formType == '' && typeof (uploadFileBtnInst) == 'undefined' ) {
uploadFileBtnInst = initUploadFileBtnInst(formType);
}
});
/**
* 初始化上传按钮(只初始化一次)
* @param formType
*/
function initUploadFileBtnInst(formType){
var upload = layui.upload;
var tempUploadFileBtnInst = upload.render({
elem: '#file-upload-btn'+formType //绑定按钮元素
,url: '/uploadParamFile' //上传接口
,auto:true
,accept: 'file'
,multiple: false
,method:'post'
,size:5000 //此处设为最大50M
,field: 'file'//对应后台的@RequestParam("file"),可修改
,drag :false
,before: function(obj){
layer.load(); //上传loading
}
,done: function(res){
//上传完毕回调
layer.closeAll('loading'); //关闭loading
}
,error: function(){
//请求异常回调
layer.msg('未知错误', {
time: 5000, //5s后自动关闭
btn: ['确定']
});
layer.closeAll('loading'); //关闭loading
}
});
return tempUploadFileBtnInst;
}
以下是后台代码:
@PostMapping("/uploadParamFile")
@ResponseBody
public Map<String, Object> uploadParamFile(@RequestParam("file") MultipartFile file) {
//log.info("开始解析");
Map<String, Object> result = new HashMap<String, Object>();
return result;
}