帮我写一个js异步上传文件
时间: 2024-05-08 08:16:15 浏览: 13
以下是一个示例代码,用于异步上传文件:
```javascript
// 获取文件选择器元素
const fileInput = document.getElementById('file-input');
// 绑定 change 事件
fileInput.addEventListener('change', async () => {
// 获取文件对象
const file = fileInput.files[0];
// 创建 FormData 对象
const formData = new FormData();
formData.append('file', file);
try {
// 发送 POST 请求
const response = await fetch('/upload', {
method: 'POST',
body: formData,
});
if (response.ok) {
// 上传成功
console.log('文件上传成功');
} else {
// 上传失败
console.log('文件上传失败');
}
} catch (error) {
console.error(error);
}
});
```
上面的代码首先获取了一个文件选择器元素,然后绑定了 change 事件。当用户选择文件后,就会触发 change 事件,代码就会异步上传文件。
在上传文件之前,代码先创建了一个 FormData 对象,并将文件对象添加到其中。然后,使用 fetch 函数发送 POST 请求,并将 FormData 对象作为请求体。如果请求成功,就输出“文件上传成功”,否则输出“文件上传失败”。
注意:上面的代码只是一个示例,实际使用时,需要根据具体情况修改 URL 和请求参数。另外,由于浏览器对上传文件的大小有限制,所以建议在服务器端进行文件大小的限制。