正文

掌握JavaScript获取下载进度条方法，轻松实现文件下载进度监控

/0 浏览量
0714

在Web开发中，文件下载是常见的需求。为了提升用户体验，我们可以通过JavaScript来监控文件的下载进度，并动态显示进度条。本文将详细介绍如何使用JavaScript实现文件下载进度监控。

一、使用XMLHttpRequest获取下载进度

XMLHttpRequest对象是现代浏览器中用于在后台与服务器交换数据的常用方式。以下是如何使用XMLHttpRequest获取下载进度的步骤：

  1. 创建一个XMLHttpRequest对象。
  2. 使用open方法初始化一个GET请求，并指定要下载的文件URL。
  3. 设置onprogress事件处理函数，用于处理下载进度。
  4. 使用send方法发送请求。

以下是一个示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/file.zip', true);

xhr.onprogress = function(event) {
    if (event.lengthComputable) {
        var percentComplete = (event.loaded / event.total) * 100;
        console.log('下载进度：' + percentComplete + '%');
        // 更新进度条
        document.getElementById('progressBar').style.width = percentComplete + '%';
    }
};

xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('文件下载完成');
    } else {
        console.log('下载失败');
    }
};

xhr.onerror = function() {
    console.log('下载过程中发生错误');
};

xhr.send();

二、使用fetch API获取下载进度

fetch API是现代浏览器提供的一种更简洁、更强大的网络请求方法。以下是如何使用fetch API获取下载进度的步骤：

  1. 使用fetch方法发起一个GET请求，并指定要下载的文件URL。
  2. 使用then方法处理响应结果。
  3. 在then方法中，使用response对象的body属性创建一个可读流。
  4. 使用readableStream的getReader方法读取数据。
  5. 设置一个循环，不断读取数据，并更新进度条。

以下是一个示例代码：

fetch('http://example.com/file.zip')
    .then(response => {
        const reader = response.body.getReader();
        let receivedLength = 0; // 已接收的字节数
        return new ReadableStream({
            start(controller) {
                function push() {
                    reader.read().then(({done, value}) => {
                        if (done) {
                            // 读取完成
                            controller.close();
                            return;
                        }
                        receivedLength += value.length;
                        let percentComplete = (receivedLength / response.headers.get('content-length')) * 100;
                        console.log('下载进度：' + percentComplete + '%');
                        // 更新进度条
                        document.getElementById('progressBar').style.width = percentComplete + '%';
                        controller.enqueue(value);
                        push();
                    }).catch(error => {
                        console.error('读取数据时发生错误：', error);
                    });
                }
                push();
            }
        });
    })
    .then(stream => new Response(stream))
    .then(response => response.blob())
    .then(blob => {
        console.log('文件下载完成');
        // 处理下载的文件
    })
    .catch(error => {
        console.error('下载失败：', error);
    });

三、总结

通过以上两种方法，我们可以轻松实现文件下载进度监控。在实际应用中，可以根据需求选择合适的方法。同时，我们还可以结合CSS样式，将进度条显示在页面上，提升用户体验。

-- 展开阅读全文 --