网络编程
位置：首页>> 网络编程>> JavaScript>> 使用FormData实现上传多个文件

使用FormData实现上传多个文件

作者：半笙彷徨　　发布时间：2024-05-11 09:30:20　

标签：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/><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";
}

前端页面：

使用FormData实现上传多个文件

请求：

使用FormData实现上传多个文件

来源：https://blog.csdn.net/wang704987562/article/details/80304471

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com