可以使用HTML5的File API和FormData来实现批量上传文件。
HTML部分:
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传</button>
JS部分:
function uploadFiles() {
// 从文件输入元素获取所选文件
var files = document.getElementById('fileInput').files;
// 创建一个FormData对象,用于发送文件数据
var formData = new FormData();
// 向formData对象添加每个文件
for (var i = 0; i < files.length; i++) {
formData.append('files', files[i], files[i].name);
}
// 创建一个XmlHttpRequest对象,用于异步上传文件
var xhr = new XMLHttpRequest();
// 设置请求方式和URL
xhr.open('POST', 'upload.php', true);
// 发送文件数据
xhr.send(formData);
}
在上面的代码中,我们首先获取了文件输入元素和所选文件。然后,我们创建了一个FormData对象,并使用append()方法向其中添加每个文件。最后,我们创建了一个XmlHttpRequest对象并使用send()方法将文件数据异步发送到服务器。
需要注意的是,在这个例子中,我们将所有选择的文件作为一个数组,命名为“files”来发送。因此,在服务器端上传文件时,需要注意接收的文件格式。