使用FormData實現上傳多個文件

2019-11-19 12:24:39

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了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")@ResponseBodypublic Object upload(@RequestParam MultipartFile[] files) {  System.out.println(files.length);  return "ok";}

前端頁面：