
首先,我们需要创建一个HTML表单,其中包含文件输入元素。文件输入元素允许用户选择文件,并将文件添加到FormData对象中。
html
在上面的代码中,我们创建了一个表单,其中包含一个文件输入元素,用户可以选择多个文件。我们还添加了一个按钮,当用户点击这个按钮时,会触发`uploadFiles`函数。
接下来,我们需要编写JavaScript代码来处理文件上传逻辑。
javascript
function uploadFiles() {
var formData = new FormData(document.getElementById('uploadForm'));
// 发起AJAX请求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);
}
在这个函数中,我们创建了一个新的FormData对象,并将表单元素作为参数传递给它。然后,我们创建了一个XMLHttpRequest对象,并设置了请求的类型为POST,URL为服务器的上传接口。我们还定义了一个回调函数来处理服务器的响应。
最后,我们需要在Java后台处理上传的文件。假设我们使用的是Spring Boot框架,我们可以使用`@RequestParam`注解来接收文件数组。
java
@PostMapping("/upload")
public String handleFileUpload(@RequestParam("files") MultipartFile[] files) {
// 处理上传的文件
for (MultipartFile *** {
// 保存文件到服务器
String fileName = file.getOriginalFilename();
File fileToSave = new File(fileName);
try {
file.transferTo(fileToSave);
} catch (IOException e) {
e.printStackTrace();
}
}
return "文件上传成功";
}
在这个控制器方法中,我们使用`@RequestParam`注解来接收名为`files`的文件数组。然后,我们遍历这个数组,将每个文件保存到服务器上。
通过以上步骤,我们就可以使用FormData对象将文件数组上传到Java后台了。需要注意的是,文件上传可能会受到服务器配置和网络环境的影响,因此在实际部署时需要进行充分的测试和优化。
更多文章请关注《万象专栏》
转载请注明出处:https://www.wanxiangsucai.com/read/cv183328