一、基本概念
XMLHttpRequestUpload
对象表示一个 XMLHttpRequest 的上传进程。它是 XMLHttpRequest 的一个属性,可以用来监视上传的进度。
XMLHttpRequestUpload
对象有一些事件监听器,可以用来处理上传过程中的各种事件:
-
loadstart:当上传开始时触发。
-
progress:在上传过程中定期触发,可以用来更新上传进度条。
-
abort:当上传被用户取消时触发。
-
error:当上传过程中出现错误时触发。
-
load:当上传成功完成时触发。
-
timeout:当上传超时时触发。
-
loadend:当上传结束(无论成功或失败)时触发。
这些事件可以让你更好地控制和监视文件上传的过程。例如,你可以使用 progress 事件来显示一个上传进度条,或者使用 error 事件来处理上传过程中的错误。
二、实战示例
javascript
function uploadFile(file, url) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('file', file); // 将文件添加到 FormData 对象中
xhr.open('POST', url, true); // 打开连接
// 监听上传进度
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
console.log('上传进度:' + percentComplete + '%');
}
};
// 监听上传完成
xhr.upload.onload = function() {
console.log('上传完成');
};
// 监听上传失败
xhr.upload.onerror = function() {
console.log('上传失败');
};
xhr.send(formData); // 发送请求
}
- 在这个示例中,我们首先创建了一个 XMLHttpRequest 对象和一个 FormData 对象。然后,我们将文件添加到 FormData 对象中,并使用 XMLHttpRequest 对象发送一个 POST 请求到 url 路径。
- 我们还添加了几个事件监听器,用于处理上传过程中的各种事件。onprogress 事件监听器用于更新上传进度,onload 事件监听器用于处理上传完成的情况,onerror 事件监听器用于处理上传失败的情况。