本文实例为大家分享了FormData上传多个文件的具体代码,供大家参考,具体内容如下
由于项目中使用的到,特此写个演示
html代码:
& lt; html>
& lt; head>
& lt; title> Title
& lt;脚本src=" https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt;形式enctype="多部分/格式" id=癴orm_example”比;
& lt;输入类型="文件" id=拔募倍喔?祝辞& lt; br/祝辞& lt; br/比;
& lt;输入类型="提交" value=" https://www.yisu.com/zixun/提交”/比;
& lt;/form>
& lt; div id=癴ile-list-display”祝辞& lt;/div>
& lt;/body>
& lt;/html>
js代码:
& lt;脚本type=" text/javascript祝辞
美元(文档)。准备好(函数(){
var文件列表=[];
var网页抓手=. getelementbyid (“form_example”);
var=. getelementbyid(“文件”)的文件,renderFileList;
var fileListDisplay=. getelementbyid (“file-list-display”), sendFile;
网页抓手。addEventListener(“提交”,函数(事件){
事件。防止发生（）：//上传文件
sendFile ();
}）;
文件。addEventListener(“改变”,函数(事件){
(var=0;我& lt;files.files.length;我+ +){
fileList.push (files.files[我]);
}
renderFileList ();
}）;
renderFileList=function () {
fileListDisplay。innerHTML=";
文件列表。forEach(函数(文件、索引){
var fileDisplayEl=document.createElement (“p”);
fileDisplayEl。innerHTML=(指数+ 1)+“:”+ file.name;
fileListDisplay.appendChild (fileDisplayEl);
}）
}；
sendFile=function () {
var formData=https://www.yisu.com/zixun/new formData ();
var=new XMLHttpRequest请求();//循环添加到formData中
文件列表。forEach(函数(文件){
formData。追加(“文件”,文件,file.name);
}）
请求。打开(“后”,“/测试/upload.do”);
request.send (formData);
}
}）
& lt;/script>
后端使用Spring MVC接收前端文件
配置扇形解析器:
& lt; bean id=癿ultipartResolver”类=皁rg.springframework.web.multipart.commons.CommonsMultipartResolver”
p: defaultEncoding=" utf - 8 "/祝辞
控制器:
@RequestMapping ("/upload.do”)
@ResponseBody
公共对象上传(@RequestParam MultipartFile[]文件){
System.out.println (files.length);
返回“ok”;
}
前端页面:
请求:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
