jquery多文件上传选择多个文件如何将多个文件传给后端
时间: 2023-10-03 07:10:26 浏览: 57
在使用 jQuery 实现多文件上传时,可以通过 FormData 对象来将多个文件一起传递给后端。以下是一个示例代码:
HTML代码:
```html
<form id="myForm">
<input type="file" id="myFile" name="files[]" multiple>
<button type="submit">上传文件</button>
</form>
```
JavaScript 代码:
```javascript
$(document).ready(function() {
$("#myForm").submit(function(event) {
// 阻止表单的默认提交行为
event.preventDefault();
// 创建 FormData 对象
var formData = new FormData();
// 获取文件域中选择的所有文件
var files = $("#myFile")[0].files;
// 遍历文件列表,将每个文件都加入到 FormData 对象中
for (var i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
// 发送 AJAX 请求,将 FormData 对象提交给后端
$.ajax({
url: 'your-backend-url',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response) {
// 处理后端返回的响应数据
},
error: function(error) {
// 处理 AJAX 请求失败的情况
}
});
});
});
```
在上述代码中,首先通过 `FormData` 对象创建一个空的表单数据对象,然后通过 `$("#myFile")[0].files` 获取文件域中选择的所有文件,并将它们逐个添加到表单数据对象中。最后,使用 jQuery 的 `$.ajax()` 方法将表单数据对象提交给后端,并在 `success` 回调函数中处理后端返回的响应数据。需要注意的是,为了正确处理二进制数据,需要将 `cache`、`contentType` 和 `processData` 都设置为 `false`。