要使用 FormData 发送文件数组,您需要遵循以下步骤:
<input>
元素,设置 type
属性为 file
,并启用 multiple
属性,以便用户可以选择多个文件:<form id="upload-form">
<input type="file" id="file-input" multiple>
<button type="submit">上传文件</button>
</form>
submit
事件,并在事件处理程序中创建一个 FormData
对象:document.getElementById('upload-form').addEventListener('submit', handleFormSubmit);
function handleFormSubmit(event) {
event.preventDefault();
const fileInput = document.getElementById('file-input');
const files = fileInput.files;
const formData = new FormData();
// 遍历文件数组并将它们添加到 FormData 对象中
for (let i = 0; i < files.length; i++) {
formData.append('files[]', files[i]);
}
// 使用 fetch API 发送请求
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
}
在这个示例中,我们首先获取表单元素并监听 submit
事件。当用户提交表单时,我们创建一个 FormData
对象,并遍历文件输入元素中的文件数组,将它们添加到 FormData
对象中。最后,我们使用 fetch
API 发送一个包含文件数据的 POST 请求。
请注意,服务器端也需要相应地处理这些文件。例如,在 Node.js 的 Express 框架中,您可以使用 multer
中间件来处理多个文件上传:
const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();
app.post('/upload', upload.array('files[]'), (req, res) => {
console.log(req.files);
res.json({ message: 'Files uploaded successfully' });
});
app.listen(3000, () => {
console.log('Server is running on port 300't);
});
在这个示例中,我们使用 multer
中间件来处理名为 files[]
的多个文件上传,并将它们保存到 uploads
目录中。
领取专属 10元无门槛券
手把手带您无忧上云