利用XMLHttpRequest实现文件上传
时间: 2023-08-07 11:19:18 浏览: 60
可以通过以下步骤利用XMLHttpRequest实现文件上传:
1. 创建XMLHttpRequest对象:
```
var xhr = new XMLHttpRequest();
```
2. 创建FormData对象,将文件添加到FormData对象中:
```
var formData = new FormData();
formData.append('file', file);
```
其中,'file'为文件对应的字段名,file为文件对象。
3. 设置请求参数,包括请求方法、请求URL、是否异步等:
```
xhr.open('POST', url, true);
```
其中,url为上传文件的地址。
4. 设置请求头部,指定上传文件的Content-Type:
```
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
```
5. 发送请求,将FormData对象作为参数:
```
xhr.send(formData);
```
6. 监听上传进度,可通过onprogress事件获取上传进度:
```
xhr.upload.onprogress = function(event) {
var percent = Math.floor(event.loaded / event.total * 100);
console.log('Upload progress: ' + percent + '%');
};
```
7. 监听上传完成事件,可通过onload事件获取上传结果:
```
xhr.onload = function() {
if (xhr.status === 200) {
console.log('Upload success');
} else {
console.error('Upload error');
}
};
```
完整代码示例:
```
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('file', file);
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.upload.onprogress = function(event) {
var percent = Math.floor(event.loaded / event.total * 100);
console.log('Upload progress: ' + percent + '%');
};
xhr.onload = function() {
if (xhr.status === 200) {
console.log('Upload success');
} else {
console.error('Upload error');
}
};
xhr.send(formData);
```