Java多文件上传 js 怎麽寫
在网站开发中，经常会遇到需要用户上传多个文件的情况。而在前端使用JavaScript来实现多文件上传功能可以让用户更方便地操作。本文将介绍如何在Java后端和JavaScript前端结合使用来实现多文件上传功能。
Java后端代码示例
首先，我们来看看Java后端如何处理多文件上传。在这里我们使用Spring Boot框架来实现。
@RestController
public class FileUploadController {
@PostMapping("/upload")
public List<String> uploadFiles(@RequestParam("files") MultipartFile[] files) {
List<String> fileNames = new ArrayList<>();
for (MultipartFile file : files) {
String fileName = file.getOriginalFilename();
// 处理文件上传逻辑
// 这里可以将文件保存到服务器指定目录
fileNames.add(fileName);
}
return fileNames;
}
}
在这段代码中，我们定义了一个uploadFiles方法，接收一个MultipartFile[]数组作为参数，该数组包含了用户上传的所有文件。在方法中遍历文件数组，将文件名添加到一个列表中，最后返回这个文件名列表。
JavaScript前端代码示例
接下来，我们看看如何使用JavaScript来实现多文件上传的功能。
document.getElementById('fileInput').addEventListener('change', function() {
var files = this.files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('files', files[i]);
}
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
});
在这段代码中，我们监听文件上传输入框的change事件，获取用户选择的文件列表，然后创建一个FormData对象，将所有文件添加到FormData中。最后使用fetch API将FormData发送到后端的/upload接口进行文件上传。
序列图
下面是一个简单的序列图，展示了前端和后端的交互过程。
sequenceDiagram
participant Frontend
participant Backend
Frontend->>Backend: 上传文件
Backend-->>Frontend: 返回文件名列表
甘特图
最后，我们来看一个甘特图，展示文件上传的流程。
gantt
title 文件上传流程
section 上传文件
上传文件至服务器: 10-15
处理文件并保存: 16-20
通过以上代码示例和图表展示，我们可以看到如何使用Java后端和JavaScript前端结合实现多文件上传功能。前端负责文件选择和发送到后端，后端则处理文件并返回相应结果。希望本文对你有所帮助。
