使用FormData实现上传多个文件
程序员文章站
2022-03-13 18:50:35
本文实例为大家分享了formdata上传多个文件的具体代码，供大家参考，具体内容如下
由于项目中使用到，特此写个demo
html代码：
本文实例为大家分享了formdata上传多个文件的具体代码，供大家参考，具体内容如下
由于项目中使用到，特此写个demo
html代码：
<html> <head> <title>title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </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代码：
<script type="text/javascript">
$(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 xmlhttprequest();
//循环添加到formdata中
filelist.foreach(function (file) {
formdata.append('files', file, file.name);
})
request.open("post", "/test/upload.do");
request.send(formdata);
}
})
</script>
后端使用spring mvc接收前端文件
配置multipart解析器：
<bean id="multipartresolver" class="org.springframework.web.multipart.commons.commonsmultipartresolver" p:defaultencoding="utf-8"/>
controller：
@requestmapping("/upload.do")
@responsebody
public object upload(@requestparam multipartfile[] files) {
system.out.println(files.length);
return "ok";
}
前端页面：
请求：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。