本文实例为大家分享了FormData上传多个文件的具体代码，供大家参考，具体内容如下
由于项目中使用到，特此写个Demo
html代码：
<html> <head> < > </ > < src=\"https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js\"></ > </head> <body> <form enctype=\"multipart/form-data\" id=\"form_example\"> <input type=\"file\" id=\"files\" multiple/><br/><br/> <input type=\"submit\" value=\"提交\"/> </form> <div id=\'file-list-display\'></div> </body> </html>
js代码：
< type=\"text/ \">
$(document).ready(function () {
var fileList = [];
var fileCatcher = document.getElementById(\'form_example\');
var files = document.getElementById(\"files\"), renderFileList;
var fileListDisplay = document.getElementById(\'file-list-display\'), sendFile;
fileCatcher.addEventListener(\"submit\", function (event) {
event.preventDefault();
//上传文件
sendFile();
});
files.addEventListener(\"change\", function (event) {
for (var i = 0; i < files.files.length; i++) {
fileList.push(files.files[i]);
}
renderFileList();
});
renderFileList = function () {
fileListDisplay.innerHTML = \'\';
fileList.forEach(function (file, index) {
var fileDisplayEl = document.createElement(\"p\");
fileDisplayEl.innerHTML = (index + 1) + \":\" + file.name;
fileListDisplay.appendChild(fileDisplayEl);
})
};
sendFile = function () {
var formData = new FormData();
var request = new HttpRequest();
//循环添加到formData中
fileList.forEach(function (file) {
formData.append(\'files\', file, file.name);
})
request.open(\"POST\", \"/test/upload.do\");
request.send(formData);
}
})
</ >
后端使用Spring MVC接收前端文件
配置multipart解析器：
<bean id=\"multipartResolver\" class=\"org.spring work.web.multipart.commons.CommonsMultipartResolver\" p:defaultEncoding=\"utf-8\"/>
Controller：
@RequestMapping(\"/upload.do\")
@ResponseBody
public upload(@RequestParam MultipartFile[] files) {
System.out.println(files.length);
return \"ok\";
}
前端页面：
![\"\"](\"/images/51jb/1543908689154359086nS989.png\")
请求：
![\"\"](\"/images/51jb/15439086891i5p4439Q08689.png\")
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
上一篇 :
2017年编程语言排行榜出炉！
下一篇 :
SQL注入测试神器sqlmap
-
阿里云学生机官网
2026-05-19栏目： 教程
-
面试的时候突然遇到答不上的问题怎么办？
2026-05-19栏目： 教程
-
CPU缓存和内存屏障
2026-05-19栏目： 教程
-
还不懂MySQL索引？这1次彻底搞懂B+树和B-树
2026-05-19栏目： 教程
-
DispatcherServlet
2026-05-19栏目： 教程