继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

慕UI4062818
关注TA
已关注
手记 348
粉丝 97
获赞 552

  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>


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP