用文字记录生活，留下美好瞬间
原创

ajax获取下载信息

共 2,624 字，需阅读 7 分钟
2019/02/13 上午
241 次阅读

使用Ajax直接获取文件下载进度是有挑战的，因为标准的Ajax请求并不直接支持进度更新，尤其是对于文件下载。不过，有几种方法可以间接实现这一功能：

#使用Blob和ProgressEvent

对于现代浏览器，可以利用XMLHttpRequest的responseType设置为blob，结合onprogress事件来监听下载进度。这种方法不严格属于Ajax，但它利用了Ajax的核心——XMLHttpRequest对象。

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <button class="btn">下载</button>
    <div class="progress">
        当前下载：<span class="current"></span>
        总大小：<span class="total"></span>
    </div>
    <script>
        const btn = document.getElementsByClassName('btn')[0]
        const progress = document.getElementsByClassName('progress')[0]
        const current = document.getElementsByClassName('current')[0]
        const total = document.getElementsByClassName('total')[0]
        const downloadFile = (url) => {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.responseType = 'blob';
            xhr.onload = function (e) {
                if (this.status === 200) {
                    const url = window.URL.createObjectURL(this.response)
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = url.split('/').pop()
                    a.click()
                    window.URL.revokeObjectURL(url)
                    a.remove()
                }
            }

            xhr.onprogress = (e) => {
                if (e.lengthComputable) {
                    const percent = e.loaded / e.total
                    current.innerHTML = (e.loaded / 1024 / 1024).toFixed(2) + 'M'
                    total.innerHTML = (e.total / 1024 / 1024).toFixed(2) + 'M'
                } else {
                    // 无法计算进度
                }
            }

            xhr.send()
        }
        btn.onclick = function () {
            downloadFile('./video.mp4')
        }
    </script>
</body>

</html>
下载进度
下载进度

  1. 初始化请求：创建一个新的XMLHttpRequest对象，并用open()方法初始化一个GET请求，指向要下载的文件URL。确保请求为异步模式。

  2. 设置响应类型：为了处理文件下载，需将responseType属性设置为blob。这样，响应将以二进制大对象（Blob）的形式返回，适用于文件处理。

  3. 监听进度事件：通过添加onprogress事件监听器，可以实时获取下载进度信息。事件对象的loaded属性表示当前已下载的字节数，而total属性（如果可用）表示文件总字节数。利用这两个值，可以计算出下载完成的百分比。

  4. 处理加载完成：同时，添加onload事件监听器来捕获文件下载完成的时刻。此时，可通过xhr.response访问到Blob形式的文件内容，之后可根据需求处理这个Blob，比如触发文件下载或在页面中展示。

  5. 发送请求：使用send()方法发送HTTP请求。

本文于2019/02/13 上午发布在秘阁
#JavaScript
自由转载 - 署名 - 非商业性使用
https://zhangwurui.cn/article/40
共0/0条看法
访客身份
在下有一拙见，不知...
期待你的捷足先登