确保你使用了正确的事件类型 “progress”,并且你正在监听xhr.upload属性上的事件而不是xhr对象本身。
确保你调用了xhr.send()方法,因为上传请求只有在调用该方法后才会发送。
确保你的服务器正确处理上传请求,并返回正确的响应码。如果上传请求返回的响应码不是200 OK,则事件监听器不会被调用。
确保你的文件没有超过服务器限制的大小。
以下是一个示例代码,其中演示了如何使用 XMLHttpRequest 上传文件并侦听进度事件:
const input = document.querySelector('input[type="file"]');
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
console.log(`File uploaded: ${percent}%`);
}
});
xhr.onload = function() {
console.log('Upload complete!');
};
xhr.onerror = function() {
console.error('An error occurred!');
};
const formData = new FormData();
formData.append('file', input.files[0]);
xhr.open('POST', '/upload');
xhr.send(formData);