在Web开发中，用户经常需要上传文件，例如图片、文档等。JavaScript作为前端的主要语言，提供了处理此类需求的能力。本文将详细讲解如何使用JavaScript实现多文件上传，并提供一个实际的代码实例。
首先，HTML部分是用户交互的基础。在提供的实例中，我们创建了一个简单的表单`<form>`，包含一个可以选取多个文件的`<input type="file">`元素，以及一个“上传”按钮。`multiple`属性允许用户选择多个文件。此外，还有一个`<a>`标签用于动态添加新的文件输入框。
```html
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<h1>多文件上传</h1>
<table>
<tr>
<td>上传文件：<input type="file" name="file[]" id="file" multiple="multiple"/>
<a href="javascript:;" id="add">[+]</a>
</td>
</tr>
<tr>
<td><input type="button" value="上传" id="but"/></td>
</tr>
</table>
</form>
```
JavaScript部分主要负责处理动态添加文件输入框、删除已添加的输入框，以及最重要的文件上传功能。`$(document).on()`方法监听`#add`和`#del`的点击事件，分别执行添加和删除操作。
```javascript
$(document).on("click", "#add", function() {
// 添加新文件输入框
});
$(document).on("click", "#del", function() {
// 删除文件输入框
});
```
文件上传的核心在于使用`FormData`对象和`$.ajax`来实现异步请求。当用户点击“上传”按钮时，`$("#but").click()`事件触发，创建一个`FormData`对象，将整个表单数据添加到其中。然后使用`$.ajax`发送POST请求到服务器，设置`async: false`表示同步请求（在生产环境中应避免使用），并禁用缓存、设置`contentType`和`processData`为`false`，以保持原始的文件数据。
```javascript
$("#but").click(function() {
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
url: 'http://localhost/demo/selfWork_MVC/easymvc/app/Views/Index/upload.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function(returndata) {
// 处理成功响应
},
error: function(returndata) {
// 处理错误响应
}
});
});
```
在服务器端（如PHP），你需要接收并处理这些上传的文件。在上述示例中，请求被发送到`upload.php`，在这个文件中，你可以使用PHP的`$_FILES`全局数组来获取上传的文件信息，例如文件名、大小、类型等，并进行保存或处理。
总结来说，这个JS多文件上传实例展示了如何利用HTML5的`FormData`和jQuery的`$.ajax`功能，配合HTML的`<input type="file">`实现用户界面，从而让用户能够方便地上传多个文件。在实际应用中，应考虑文件大小限制、错误处理、进度显示等更复杂的需求。同时，确保服务器端的正确配置以接收和处理这些文件。
