最近项目需要批量上传附件,查了下资料,网上很多但看着一脸懵,只贴部分代码,介绍也不详细,这里记录一下自己的采坑与多种实现,以免以后忘记。
这里先介绍下FormData对象,以下内容摘自地址
XMLHttpRequest二级添加了一个新的接口FormData。利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的发送()方法来异步的提交这个“表”单。比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。
在我的自定义输入文件上传样式里就已经实现里单文件上传,并且实现了自定义输入样式,如果构造FormData对象是传入表单js对象,FormData会自动注入表单里的值,如果是新的一个空对象,然后手动附加的表单类型为文件时要注意:这里添加进去的是文件对象,而不是文件列表对象
先看一下大概效果:
控制器有两种方法:三种方式调的都是用一个接口
/* *
*批量上传
*/@PostMapping(“上传”)
公共ResultModel比;上传(HttpServletRequest请求,@RequestParam (applyId)字符串applyId) {
ListmultipartFileList=((MultipartHttpServletRequest)请求).getFiles(“附件”);
System.out.println (multipartFileList.size ());
System.out.println (applyId);
返回null;
}/* *
*批量上传2(推荐使用)
*/@PostMapping (“upload2”)
公共ResultModel比;upload2 (MultipartFile[]附件@RequestParam (applyId)字符串applyId) {
System.out.println (attachment.length);
System.out.println (applyId);
返回null;
}
之前
<强>方式1
点击添加、追加一个输入,点击删除,删除一个输入,点击叉号也可以删除对应的输入,需要单独为每个输入选择文件
效果
html
& lt;形式id="附件" enctype=岸嗖糠?格式”类=癴orm-horizontal nice-validator n-yellow”已经=耙丫北?
& lt; div类=癴orm-body”比;
& lt; div类='形式的班级比;
& lt;标签类=" control-label col-md-1”祝辞附件管理:& lt;/label>
& lt; div类=癱ol-md-4”比;
& lt;按钮id=癮ttachmentAddBtn”类型=鞍磁ァ崩?癰tn btn-default”在添加Attachment
& lt;按钮id=癮ttachmentDeleteBtn”类型=鞍磁ァ崩?癰tn btn-default”在删除Attachment
& lt;按钮id=癮ttachmentUploadBtn”类型=鞍磁ァ崩?癰tn btn-default祝辞Upload
& lt;/div>
& lt;/div>
& lt; div类='形式的班级比;
& lt;标签类=" control-label col-md-1”祝辞附件上传:& lt;/label>
& lt; div id=癮ttachmentInputs”class=癱ol-md-3”比;
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/form>
js
//attachment-remove
$ (" # attachmentInputs”)。(“点击”、“。attachment-remove”功能(甚至){
美元(这).prev () .remove();//删除上一个兄弟节点
(美元).remove();//删除自己
});//添加但
$ (" # attachmentAddBtn”)。点击(函数(甚至){//名称值一样就可以
$ (" # attachmentInputs ") .append (“& lt;输入name=\ "附件\“type=\ "文件\“阶级=\”表单控件input-attachment \“我/祝辞;& lt;类=\ " fa fa-times attachment-remove \“祝辞& lt;/i>”);
});//删除
$ (" # attachmentDeleteBtn”)。点击(函数(甚至){=$ var文件(“# attachmentInputs输入type='文件']”);
文件。每个(函数(指数(元素){//从最下面开始删除,至少保留一个
如果(!(指数===0),,指数===(文件。长度- 1)){
(元素). next()美元.remove ();
$(元素).remove ();
}
});
});//上传
$ (" # attachmentUploadBtn”)。点击(函数(甚至){//1,通过HTML表单创建FormData对象自动注入//var formData=https://www.yisu.com/zixun/new formData($(“#附件”)[0]);//2,从零开始创建FormData对象手动注入
var formData=https://www.yisu.com/zixun/new formData ();//注入name=文件=$ var文件(“# attachmentInputs输入type='文件']”);
(var=0;我& lt;files.length;我+ +){//注意:这里添加进去的是文件对象,而不是文件列表对象
formData。追加(“附件”,文件[我].files [0]);
}//注入name=文本
formData。追加(“applyId”、“123456”);
console.log (formData.getAll(“附件”));//执行上传
. ajax({美元
url: ctx +“/附件/upload2”,
类型:“文章”,
数据:formData,
processData:假的,
contentType:假的,
成功:功能(数据){
},
错误:函数(e) {
}
});
});//添加属性,可以再弹窗里选择多个文件提交,如果再加工一下,也做成第三种一样,展示出文件名,同时可以删除对应的文件
