前端HTML
<div class="layui-input-inline">
<button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
<button type="button" class="layui-btn layui-btn-normal" id="test9">选择文件</button>
</div>
<label class="layui-form-label">图片</label>
<div class="layui-input-inline">
<div class="layui-upload-drag" id="picturePath" >
<i class="layui-icon"></i>
<p>点击上传,或将文件拖拽到此处</p>
</div>
</div>
JS代码
upload = layui.upload;
form = layui.form;
//选完文件后不自动上传
upload.render({
elem: '#test8'
,auto: false
,choose: function(obj){
vifiles = obj.pushFile(); //文件1
}
});
//选完文件后不自动上传
upload.render({
elem: '#test9'
,auto: false
,choose: function(obj){
zipfiles = obj.pushFile(); //文件1
}
});
//文件图片上传
upload.render({
elem: '#picturePath'
,accept: 'images'
,acceptMime: 'image/*'
,method: 'post'
,multiple: false
,drag:true
,auto: false
,choose:function(obj){
//单文件上传,每次都清空文件对象
for(index in files){
delete files[index];
}
files = obj.pushFile();
//图像预览,如果是多文件,会逐个添加。(不支持ie8/9)
obj.preview(function(index, file, result){
var imgBox = document.createElement("div");//预览图、删除预览图按钮容器
var imgobj = new Image(); //创建新img对象
imgBox.style.float = 'left';
imgBox.style.position = 'relative';
imgobj.src = result; //指定数据源
imgobj['layer-src'] = result;
imgobj.alt = file.name;
imgobj.className = 'layui-upload-img';
imgobj['layer-index'] = index;
imgobj.width=100;
imgobj.height=100;
imgBox.appendChild(imgobj);
$("#demo2").html(imgBox);
});
}
,done: function(res){
//上传完毕
}
});
//表单提交
form.on('submit(addBrand)', function(data){
var myForm = document.getElementById("brandForm");
var formData = new FormData(myForm);
if(!files || !is_obj_empty(files)){
layer.msg('请上传商标图片',{icon:2});
return false;
}
//循环 files(第一步choose回调中储存的对象) 逐条插入到formData
for (var i in files) {
formData.append("imageFile",files[i]);//此处的imageFile为上传接口参数名
}
for(var vi in vifiles){
formData.append("viFile",vifiles[vi]); //此处的viFile为上传接口参数名
}
for(var vi in zipfiles){
formData.append("zipFile",zipfiles[vi]); //此处的zipFile为上传接口参数名
}
var index = top.layer.msg('数据提交中,请稍候',{icon: 16,time:false,shade:0.8});
var msg,flag=false;
$.ajax({
url: ctx+"/brand/add",
type: "POST",
data: formData,
async: false,
contentType: false,
processData: false,
error: function () {
layer.msg('网络超时',{icon:2});
},
success: function (d) {
if(d.code==0){
msg="商标添加成功!";
flag=true;
$("#brandForm")[0].reset(); //表单重置
$("#demo2").html(""); //清空图片预览
for (var i in files) {
delete files[i]//此处的files中的数据
}
}else{
msg=d.msg;
}
}
})
setTimeout(function(){
top.layer.close(index);
if(flag){
top.layer.msg(msg,{icon: 1});
top.layer.close(index);
}else{
top.layer.msg(msg,{icon: 5});
}
},2000);
return false;
});
后端java代码接受
@RequestMapping("/brand/add")
public String addBrand(BrandDTO brandDTO, @RequestParam("imageFile") MultipartFile file,
@RequestParam("viFile") MultipartFile viFile,@RequestParam("zipFile") MultipartFile zipFile){
}
brandDto对应的是form表单中的参数字段。
这样就可以完成layui多文件上传了。