批量上传附件：JavaScript与FormData实战

"这篇文稿主要探讨了如何在JavaScript中使用FormData对象实现批量文件上传功能，包括FormData对象的原理和优势，以及与Ajax提交的关系。同时，提到了控制器中的两种处理批量上传的方法。" 在现代Web开发中，批量上传文件是一项常见的需求。`FormData`对象在JavaScript中扮演着关键角色，尤其是在异步上传文件时。`FormData`是XMLHttpRequest Level 2引入的一个新特性，它允许开发者创建并发送模拟表单的数据。通过这个对象，我们可以构建包含键值对的数据结构，这些数据可以是文本，也可以是二进制文件。 使用`FormData`的一个重要优点是能够异步上传二进制文件，这对于处理大文件或多个文件尤其有用，因为它避免了页面刷新，提供了更好的用户体验。在创建`FormData`对象时，有两种常见的使用方式：一种是将整个表单对象作为参数传递，这样`FormData`会自动填充表单的所有字段；另一种是新建一个空的`FormData`对象，然后使用`append`方法手动添加键值对，特别是对于文件上传，需要添加`File`对象，而不是`FileList`对象。 在前端实现批量文件上传时，通常需要遍历用户选择的文件，将每个文件分别添加到`FormData`实例中。例如： ```javascript let formData = new FormData(); document.getElementById('fileInput').files.forEach(file => { formData.append('files', file); }); ``` 在这个例子中，`fileInput`是HTML的`<input type="file">`元素，用户可以选择多个文件。`forEach`遍历所有选中的文件并将它们添加到`formData`中，键名`'files'`可以根据实际需求调整。 在后端处理批量上传时，有两个示例控制器方法。第一个方法接收`HttpServletRequest`，从中获取`MultipartFile`的列表。第二个方法更直接，接受`MultipartFile`数组。这两种方式都可以用来处理批量上传的文件，具体使用哪种取决于项目的技术栈和偏好。 ```java // 第一个控制器方法 @PostMapping("upload") public ResultModel<List<AttachmentVo>> upload(HttpServletRequest request, @RequestParam("applyId") String applyId) { List<MultipartFile> multipartFileList = ((MultipartHttpServletRequest) request).getFiles("attachment"); // 其他处理逻辑... } // 第二个控制器方法 @PostMapping("upload2") public ResultModel<List<AttachmentVo>> upload2(@RequestParam("attachment") MultipartFile[] attachments, @RequestParam("applyId") String applyId) { // 其他处理逻辑... } ``` 在这两个方法中，`@RequestParam`注解用于获取前端发送的参数，`applyId`是一个额外的参数，可能用于关联上传的文件。`multipartFileList`或`attachments`数组包含了所有上传的文件。 通过JavaScript的`FormData`对象和Ajax技术，我们可以实现批量文件上传功能，同时保持页面的交互性和响应性。在后端，可以通过不同的方式接收和处理这些文件，以满足业务需求。理解和熟练运用这些技术对于现代Web开发至关重要。