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

发布时间：2020-08-18 16:45:30 作者：Lee_吉
来源：网络阅读：18673
代码：
<!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>
测试：
javascript使用ajax下载文件进度条实现

相关阅读
