如何从 XMLHttpRequest 获取请求进度？

在进行文件上传或下载时，了解当前操作的进度对于改善用户体验非常重要。在使用XMLHttpRequest (XHR) 进行这类操作时，您可以通过监听进度事件来获取进度信息。

步骤如下：

创建一个XMLHttpRequest对象：首先，创建一个XMLHttpRequest实例。
```
javascript
var xhr = new XMLHttpRequest();
```

注册事件监听器：对于上传或下载进度，可以分别监听upload.progress或progress事件。这些事件会在数据传输过程中多次触发，提供关于进度的信息。

javascript
// 监听下载进度
xhr.onprogress = function(event) {
    if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total * 100;
        console.log('下载进度：' + percentComplete.toFixed(2) + '%');
    }
};

// 监听上传进度
xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total * 100;
        console.log('上传进度：' + percentComplete.toFixed(2) + '%');
    }
};

设置请求并发送：设置适当的请求参数，如URL、请求方法等，并发送请求。
```
javascript
xhr.open('GET', 'path/to/resource');
xhr.send();
```

实际应用示例：

假设您正在开发一个网页应用，需要用户上传视频文件，并希望在上传过程中显示进度条。

javascript
function uploadFile(file) {
    var xhr = new XMLHttpRequest();

    // 设置上传文件的请求方式和地址
    xhr.open('POST', '/upload/video');

    // 设置进度条逻辑
    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            var percentComplete = event.loaded / event.total * 100;
            // 假设有一个进度条的元素
            document.getElementById('uploadProgress').style.width = percentComplete.toFixed(2) + '%';
        }
    };

    // 设置请求完成后的逻辑
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('上传成功');
        } else {
            console.log('上传失败：' + xhr.statusText);
        }
    };

    // 发送请求
    var formData = new FormData();
    formData.append('file', file);
    xhr.send(formData);
}

在这个例子中，我们创建了一个uploadFile函数来处理文件上传。我们监听了upload.onprogress事件来更新页面上的进度条，并在上传完成后通过xhr.onload处理成功或失败的逻辑。

总结：

通过监听XMLHttpRequest的progress和upload.progress事件，我们可以有效地跟踪文件的上传和下载进度。这不仅提高了用户体验，同时也使得问题的诊断和处理变得更加容易。

2024年7月26日 21:41 回复

1个答案

步骤如下：

实际应用示例：

总结：

你的答案