html批量提交表单,js使⽤formData实现批量上传_含真_前端开
发者
最近项⽬需要批量上传附件，查了下资料，⽹上很多但看着⼀脸懵，只贴部分代码，介绍也不详细，这⾥记录⼀下⾃⼰的采坑与多种实现，以免以后忘记。
这⾥先介绍下FormData对象，以下内容摘⾃地址
XMLHttpRequest Level 2添加了⼀个新的接⼝FormData.利⽤FormData对象，我们可以通过JavaScript⽤⼀些键值对来模拟⼀系列表单控件，我们还可以使⽤XMLHttpRequest的send()⽅法来异步的提交这个”表单”.⽐起普通的ajax，使⽤FormData的最⼤优点就是我们可以异步上传⼀个⼆进制⽂件.
在我的⾃定义input⽂件上传样式⾥就已经实现⾥单⽂件上传，并且实现了⾃定义input样式；如果构造FormData对象是传⼊表单
先看⼀下⼤概效果：
controller有两种⽅法：三种⽅式调的都是⽤⼀个接⼝
/**
* 批量上传
*/
@PostMapping("upload")
public ResultModel> upload(HttpServletRequest request, @RequestParam("applyId") String applyId){
List multipartFileList = ((MultipartHttpServletRequest) request).getFiles("attachment");
System.out.println(multipartFileList.size());
System.out.println(applyId);
return null;
}
/**
* 批量上传2 (推荐使⽤)
*/
@PostMapping("upload2")
public ResultModel> upload2(MultipartFile[] attachment,@RequestParam("applyId") String applyId){
System.out.println(attachment.length);
System.out.println(applyId);
return null;
}
⽅式1
点击Add，追加⼀个input，点击Delete，删除⼀个input，点击叉号也可以删除对应的input，需要单独为每个input选择⽂件效果
附件管理：
Add Attachment
Delete Attachment
Upload
附件上传：
//attachment-remove
$("#attachmentInputs").on("click", ".attachment-remove", function (even) {
$(this).prev().remove();//删除上⼀个兄弟节点
$(this).remove();//删除⾃⼰
});
//add but
$("#attachmentAddBtn").click(function (even) {
//name值⼀样就可以
$("#attachmentInputs").append("");
});
//delete
$("#attachmentDeleteBtn").click(function (even) {
var files = $("#attachmentInputs input[type='file']");
files.each(function (index, element) {
//从最下⾯开始删除，⾄少保留⼀个
if (!(index === 0) && index === (files.length - 1)) {
$(element).next().remove();
$(element).remove();
}
});
});
//upload
$("#attachmentUploadBtn").click(function (even) {
//1、通过
⽅式2
第⼆种⽅式只有⼀个input，⽤的是multiple=”multiple”属性，可以再弹窗⾥选择多个⽂件提交，如果再加⼯⼀下，也做成第三种⼀样，展⽰出⽂件名，同时可以删除对应的⽂件
效果
附件管理：
Upload
附件上传：
//upload2
$("#attachmentUploadBtn2").click(function (even) {
//1、通过HTML表单创建FormData对象 ⾃动注⼊
/
/ var formData = new FormData($("#attachments2")[0]);
//2、从零开始创建FormData对象 ⼿动注⼊
var formData = new FormData();html中提交表单用什么属性
//注⼊ name=file
var files = $("#attachmentInputs2 input[type='file']");
for (var i = 0; i < files[0].files.length; i++) {
formData.append("attachment", files[0].files[i]);
}
//注⼊name=text
formData.append("applyId", "123456");
console.All("attachment"));
/
/执⾏上传
$.ajax({
url: ctx + "/attachment/upload2",
type: "post",
data: formData,
processData: false,
contentType: false,
success: function (data) {
},
error: function (e) {
}
});
});
⽅式3
定义了⼀个隐藏的input，并将Select File按钮的click与input的click对等，点击按钮相当于点击input，弹出选择⽂件对话框，监听了input的change事件，将选择的file对象push到全局数组变量attachmentArray中，点击Upload时再遍历注⼊到formData中
效果
html
附件管理：
Select File
Upload
附件上传：
//存放file对象
var attachmentArray = [];
//attachment-remove
$("#attachmentText3").on("click", ".attachment-remove", function (even) {
//删除attachmentArray数据
attachmentArray.splice($(this).data("index"), 1);
//删除html对象
$(this).prev().prev().remove();
$(this).prev().remove();
$(this).remove();
});
//Select File
$("#selectFile").click(function (even) {
// 获取input
$("#attachmentInputs3").click();
});
//input change
$("#attachmentInputs3").change(function (even) {
// 获取input
var fileName = $(this).val();
var file = $(this)[0].files[0];
//是否选择了⽂件
if (fileName) {
attachmentArray.push(file);
$("#attachmentText3").append("
" + fileName + "
")
}
});
//upload3
$("#attachmentUploadBtn3").click(function (even) { //这⾥只能⼿动注⼊
var formData = new FormData();
//遍历数据，⼿动注⼊formData
for (var i = 0; i < attachmentArray.length; i++) { formData.append("attachment", attachmentArray[i]); }
formData.append("applyId", "123456");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。