javascript使用ajax下载文件进度条实现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript使用ajax下载文件进度条实现相关的知识,希望对你有一定的参考价值。

  1. 代码:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <title></title>
    </head>
    <body>
    <div id="a1" data-filename="2018.rar">下载</div>
    <div id="progressing"></div>
    <script>
        $(‘#a1‘).click(function () {
            var that = this;
            var page_url = ‘http://localhost/test.php‘;
            var req = new XMLHttpRequest();
            req.open("get", page_url, true);
            //监听进度事件
            req.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log(percentComplete);
                    $("#progressing").html((percentComplete * 100) + "%");
                }
            }, false);
            req.responseType = "blob";
            req.onreadystatechange = function () {
                if (req.readyState === 4 && req.status === 200) {
                    var filename = $(that).data(‘filename‘);
                    if (typeof window.chrome !== ‘undefined‘) {
                        // Chrome version
                        var link = document.createElement(‘a‘);
                        link.href = window.URL.createObjectURL(req.response);
                        link.download = filename;
                        link.click();
                    } else if (typeof window.navigator.msSaveBlob !== ‘undefined‘) {
                        // IE version
                        var blob = new Blob([req.response], { type: ‘application/force-download‘ });
                        window.navigator.msSaveBlob(blob, filename);
                    } else {
                        // Firefox version
                        var file = new File([req.response], filename, { type: ‘application/force-download‘ });
                        window.open(URL.createObjectURL(file));
                    }
                }
            };
            req.send();
        });
    </script>
    </body>
    </html>
  2. 测试:
    技术分享图片
    技术分享图片

以上是关于javascript使用ajax下载文件进度条实现的主要内容,如果未能解决你的问题,请参考以下文章

jquery ajax实现上传文件代码,带进度条

jquery ajax实现上传文件代码,带进度条

在javascript-ajax中提交表单时如何显示进度条

AJAX 进度条 - 轮询,彗星?

Rails - Ajax 与不显眼的 javascript Jquery UI 进度条

.NET MVC中使用WebClient在后台下载文件,前台显示进度。