Ajax多文件上传是一种在不刷新整个页面的情况下，通过JavaScript和XMLHttpRequest对象实现文件上传的技术，这种技术在现代Web应用中非常常见，如图片上传、视频上传等，本文将详细介绍如何使用Ajax实现多文件上传。
1、准备工作
在使用Ajax多文件上传之前，我们需要完成以下准备工作：
- 创建一个HTML表单，用于选择要上传的文件，表单中需要包含一个<input type="file">元素，用于让用户选择文件，为了支持多个文件上传，我们可以添加一个<input type="file">元素，并为其设置multiple属性。
<form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="file" multiple> <button type="button" onclick="uploadFiles()">上传</button> </form>
- 引入jQuery库，因为Ajax操作是基于jQuery的。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2、Ajax多文件上传实现
接下来，我们将使用jQuery编写Ajax多文件上传的实现代码，我们需要监听表单的submit事件，并在事件处理函数中阻止表单的默认提交行为，我们使用FormData对象收集表单中的数据，并通过XMLHttpRequest对象发送Ajax请求，我们需要处理服务器返回的响应数据。
function uploadFiles() {
// 阻止表单默认提交行为
$('#uploadForm').on('submit', function (e) {
e.preventDefault();
upload();
});
}
function upload() {
// 获取表单中的文件数据
var formData = new FormData($('#uploadForm')[0]);
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听服务器返回的响应数据
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('上传成功');
} else if (xhr.readyState === 4) {
console.log('上传失败');
}
};
// 发送Ajax请求
xhr.open('POST', 'server/upload', true);
xhr.send(formData);
}
3、服务器端处理
在服务器端，我们需要接收客户端发送的文件数据，并将其保存到服务器上，这里以Node.js为例，使用multer库处理文件上传，安装multer库：
npm install multer --save
编写服务器端代码：
const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' }); // 设置文件存储路径
app.post('/upload', upload.array('file'), (req, res) => {
console.log('文件已接收');
res.sendStatus(200);
});
app.listen(3000, () => {
console.log('服务器启动在3000端口');
});
至此，我们已经实现了一个简单的Ajax多文件上传功能，用户可以选择多个文件并点击“上传”按钮，文件将被发送到服务器端并保存在指定的文件夹中，在实际项目中，我们还可以根据需求对文件进行进一步的处理，如预览、压缩等。