溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

javascript使用ajax下載文件進(jìn)度條實(shí)現(xiàn)

發(fā)布時(shí)間：2020-08-18 16:45:30 來源：網(wǎng)絡(luò) 閱讀：18665 作者：Lee_吉 欄目：web開發(fā)
  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);
        //監(jiān)聽進(jìn)度事件
        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下載文件進(jìn)度條實(shí)現(xiàn)
    javascript使用ajax下載文件進(jìn)度條實(shí)現(xiàn)
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手