ajax上传多个文件
时间: 2023-08-07 10:06:38 浏览: 71
可以使用FormData对象结合XMLHttpRequest对象来实现多文件上传。以下是一个简单的示例代码:
HTML代码:
```html
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="files[]" multiple>
<button type="submit">上传</button>
</form>
```
JavaScript代码:
```javascript
const form = document.getElementById('uploadForm');
const fileInput = document.querySelector('input[type="file"]');
const uploadButton = form.querySelector('button[type="submit"]');
uploadButton.addEventListener('click', function(e) {
e.preventDefault();
const files = fileInput.files;
if (files.length === 0) {
alert('请选择文件');
return;
}
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
const xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function() {
if (xhr.status === 200) {
alert('上传成功');
} else {
alert('上传失败');
}
};
xhr.send(formData);
});
```
注意,需要在服务器端编写对应的处理上传文件的代码,以PHP为例:
```php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$files = $_FILES['files'];
$count = count($files['name']);
for ($i = 0; $i < $count; $i++) {
$tmp_name = $files['tmp_name'][$i];
$name = $files['name'][$i];
$error = $files['error'][$i];
if ($error === UPLOAD_ERR_OK) {
move_uploaded_file($tmp_name, 'uploads/' . $name);
}
}
echo '上传成功';
}
```