javascript使用ajax下載檔案進度條實現

來源:互聯網
上載者:User

標籤:javascript使用ajax下載檔案

  • 代碼:
    <!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下載檔案進度條實現

    相關文章

    聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.