formData实现多文件上传与java后端交互
时间: 2024-02-05 09:10:49 浏览: 87
使用FormData实现上传多个文件
要实现多文件上传与Java后端交互,可以使用FormData来实现。具体步骤如下:
1. 在HTML页面中使用input标签设置type为file,name为上传文件的名称。
```html
<form id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="file1" />
<input type="file" name="file2" />
<input type="submit" value="上传" />
</form>
```
2. 在JavaScript中获取表单元素,并使用FormData来构建上传数据。
```javascript
var form = document.getElementById("uploadForm");
var formData = new FormData(form);
```
3. 使用XMLHttpRequest对象向后端发送请求,并将FormData作为参数传递。
```javascript
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log("上传成功");
} else {
console.log("上传失败");
}
};
xhr.send(formData);
```
4. 在Java后端中使用MultipartHttpServletRequest接收上传文件。
```java
@RequestMapping("/upload")
@ResponseBody
public String upload(HttpServletRequest request) throws Exception {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
List<MultipartFile> fileList = multipartRequest.getFiles("file1");
// 处理上传文件
return "上传成功";
}
```
其中,"file1"表示上传文件的名称,可以根据实际情况修改。
以上就是使用FormData实现多文件上传与Java后端交互的步骤,希望能帮到你。
阅读全文