使用FormData實現上傳多個文件

來源：懂視網責編：小OO 時間：2020-11-27 22:03:02

使用FormData實現上傳多個文件

本文實例為大家分享了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/>；<。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了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/>；<。

本文實例為大家分享了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";
}

前端頁面：