首先，我们需要创建一个HTML表单，其中包含文件输入元素。然后，使用JavaScript创建一个FormData对象，并将文件添加到该对象中。最后，使用XMLHttpRequest或Fetch API将FormData对象发送到Java后台。
以下是一个简单的示例：
HTML部分：
html
JavaScript部分：
javascript
function uploadFiles() {
var formData = new FormData(document.getElementById('uploadForm'));
fetch('your-server-endpoint', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
}
Java后台部分（使用Spring Boot为例）：
java
@PostMapping("/upload")
public ResponseEntity handleFileUpload(@RequestParam("files") MultipartFile[] files) {
// 处理上传的文件
for (MultipartFile *** {
// 保存文件到服务器
// ...
}
return ResponseEntity.ok().build();
}
在上述代码中，我们创建了一个名为`uploadForm`的表单，其中包含一个文件输入元素，用户可以通过它选择多个文件。当用户点击“上传”按钮时，`uploadFiles`函数会被调用。这个函数创建了一个`FormData`对象，并将表单数据添加到该对象中。然后，我们使用Fetch API将`FormData`对象发送到Java后台的`/upload`端点。
在Java后台，我们使用Spring Boot的`@PostMapping`注解来处理文件上传。`@RequestParam("files") MultipartFile[] files`参数将接收上传的文件数组。在方法体内，我们可以遍历这个数组，并对每个文件执行保存操作。
请注意，你需要根据实际情况调整HTML表单的`action`属性和JavaScript中的`fetch`请求URL。同时，确保你的Java后端已经配置了文件上传的相关设置，例如在Spring Boot中，你需要在`application.properties`或`application.yml`文件中添加以下配置：
properties
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
这样，你就可以使用FormData对象将文件数组上传到Java后台了。
更多文章请关注《万象专栏》
转载请注明出处：https://www.wanxiangsucai.com/read/cv182758