怎么使用FormData 和 XMLHttpRequest
时间: 2024-01-22 16:19:26 浏览: 25
FormData 和 XMLHttpRequest 是用于上传文件和发送异步请求的两个重要的 Web API。
下面是使用 FormData 和 XMLHttpRequest 发送 POST 请求上传文件的示例代码:
```javascript
// 创建一个 FormData 对象
const formData = new FormData();
// 添加文件到 FormData 对象
formData.append('file', fileInput.files[0]);
// 创建一个 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 设置请求方式和 URL
xhr.open('POST', '/upload');
// 发送 FormData 对象
xhr.send(formData);
// 监听上传进度
xhr.upload.addEventListener('progress', (event) => {
if (event.lengthComputable) {
const percentComplete = event.loaded / event.total * 100;
console.log(`上传进度: ${percentComplete.toFixed(2)}%`);
}
});
// 监听请求完成事件
xhr.addEventListener('load', (event) => {
console.log('上传完成');
});
// 监听请求错误事件
xhr.addEventListener('error', (event) => {
console.error('上传出错');
});
// 监听请求取消事件
xhr.addEventListener('abort', (event) => {
console.warn('上传被取消');
});
```
上面的示例代码中,通过 FormData 对象添加了一个文件,并将其发送到了服务器的 /upload 接口。同时,还监听了上传进度、请求完成、请求错误和请求取消等事件。
需要注意的是,如果要上传多个文件,可以通过循环添加的方式,或者使用多个 file input 元素来实现。同时,还需要根据具体的需求来设置 XMLHttpRequest 对象的其他属性,例如请求头、超时时间等等。