使用FormData实现上传多个文件

在现代Web应用中，文件上传是一项常见的功能。`FormData`对象是HTML5引入的一个非常实用的API，它允许我们方便地处理表单数据，尤其是在上传文件时。本篇文章将详细介绍如何使用`FormData`来实现上传多个文件的功能。 我们要明白`FormData`的基本用法。`FormData`对象用于存储键值对，特别适用于发送数据到服务器，尤其是当数据包含文件时。创建一个`FormData`对象，然后使用`append`方法添加文件或文本数据。例如： ```javascript var formData = new FormData(); formData.append('key', 'value'); formData.append('files', file, fileName); ``` 在给定的示例中，HTML部分创建了一个多文件选择的表单，用户可以选择多个文件进行上传： ```html <form enctype="multipart/form-data" id="form_example"> <input type="file" id="files" multiple/> <br/><br/> <input type="submit" value="提交"/> </form> <div id='file-list-display'></div> ``` 这里，`enctype="multipart/form-data"`是必须的，因为我们需要上传文件。`id="files"`的输入元素允许用户选择多个文件，通过`multiple`属性实现。 JavaScript部分使用jQuery监听表单的提交事件，并在文件选择改变时更新文件列表。当用户点击“提交”按钮，`sendFile`函数会被调用，该函数创建一个新的`FormData`对象，并将所有选定的文件添加到其中： ```javascript sendFile = function () { var formData = new FormData(); fileList.forEach(function (file) { formData.append('files', file, file.name); }) var request = new XMLHttpRequest(); request.open("POST", "/test/upload.do"); request.send(formData); } ``` 在这里，`files.files`是用户选择的文件列表，`formData.append`将每个文件添加到`FormData`，同时指定一个键（'files'）和文件名。 在后端，如果使用Spring MVC，我们需要配置一个multipart解析器，如`CommonsMultipartResolver`，以便能够处理多部分请求： ```xml <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" p:defaultEncoding="utf-8"/> ``` 接着，我们创建一个控制器处理文件上传请求： ```java @RequestMapping("/upload.do") @ResponseBody public Object upload(@RequestParam MultipartFile[] files) { System.out.println(files.length); return "ok"; } ``` 这里的`@RequestParam MultipartFile[] files`参数会接收前端发送的多个文件，`files.length`将输出选中的文件数量。 这个例子展示了如何使用`FormData`与XMLHttpRequest配合，实现前端多文件上传，并通过Spring MVC在后端接收并处理这些文件。这种技术对于现代Web应用中的文件上传非常有用，因为它允许异步、无刷新的文件上传，提高了用户体验。同时，`FormData`也适用于其他HTTP客户端库，如axios或fetch API，使得在不同环境下都能灵活地处理文件上传。