当前位置：首页 > news >正文

jq/h5 实现实时获取大文件下载进度

news 来源：原创 2024/5/19 1:34:01

废话不多说，直接上代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>下载进度条</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style type="text/css">
    .containerBar {
        width: 521px;
        border: 1px solid #008fcd;
        height: 21px;
        border-radius: 10px;
        overflow: hidden;
        margin: auto;
    }

    #bar {
        background: #008fcd;
        float: left;
        height: 100%;
        text-align: center;
        line-height: 150%;
    }

    #total {
        margin-bottom: 20px;
    }

    /* 加载中 */
    #loading {
        display: none;
        height: 32px;
    }

    #loading span {
        position: absolute;
        left: 40px;
    }

    .demo1 {
        width: 4px;
        height: 4px;
        border-radius: 2px;
        background: #008fcd;
        float: left;
        margin: 5px 3px;
        animation: demo1 linear 1s infinite;
        -webkit-animation: demo1 linear 1s infinite;
    }

    .demo1:nth-child(1) {
        animation-delay: 0s;
    }

    .demo1:nth-child(2) {
        animation-delay: 0.15s;
    }

    .demo1:nth-child(3) {
        animation-delay: 0.3s;
    }

    .demo1:nth-child(4) {
        animation-delay: 0.45s;
    }

    .demo1:nth-child(5) {
        animation-delay: 0.6s;
    }

    @keyframes demo1 {

        0%,
        60%,
        100% {
            transform: scale(1);
        }

        30% {
            transform: scale(2.5);
        }
    }

    @-webkit-keyframes demo1 {

        0%,
        60%,
        100% {
            transform: scale(1);
        }

        30% {
            transform: scale(2.5);
        }
    }
</style>

<body>
    <div style="text-align: center;">

        <button onclick="onClick()" style="width: 200px;height:200px;margin: 15px;">点击下载</button>

        <div class="containerBar">
            <div id="bar" style="width:0%;"></div>
        </div>
        <span id="total">0%</span>
        <div id="loading">
            <!-- <span>正在生成码包</span> -->
            <div class="demo1"></div>
            <div class="demo1"></div>
            <div class="demo1"></div>
            <div class="demo1"></div>
            <div class="demo1"></div>
        </div>
    </div>
</body>
<script type="text/javascript">
    function onClick() {

        var page_url = 'http://xxxxxxx.cn/3_21%20(4).apk';
        // var req = new XMLHttpRequest();

        var req;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            req = new XMLHttpRequest();
        }else {
            // IE6, IE5 浏览器执行代码
            req = new ActiveXObject("Microsoft.XMLHTTP");
        }

        req.open("get", page_url, true);
        $("#total").css('display', 'none');
        req.addEventListener("progress", function (evt) {
            console.log(evt)
            if (evt.lengthComputable) {
                $("#total").css('display', 'block');
                $("#loading").css('display', 'inline-block')
                var percentComplete = Number((evt.loaded / evt.total).toString().match(/^\d+(?:\.\d{0,2})?/));
                console.log(percentComplete);
                let bar = document.getElementById("bar")
                console.log(bar)
                if (bar != null && bar != 'bull') {
                    console.log(bar)
                    bar.style.width = (percentComplete * 100) + "%";
                    $("#total").html(Math.floor(percentComplete * 100) + "%");
                }
                if (percentComplete == 1) {
                    setTimeout(function () {
                        //下载完成要执行的操作
                        $("#total").html('下载完成')
                        $("#loading").css('display', 'none')
                    }, 500);
                }
            }
        }, false);
        req.responseType = "blob";
        req.onreadystatechange = function () {
            if (req.readyState === 4 && req.status === 200) {
                var filename = 'test.apk';
                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/vnd.android.package-archive' });
                    window.navigator.msSaveBlob(blob, filename);
                } else {
                    // Firefox version
                    var file = new File([req.response], filename, { type: 'application/vnd.android.package-archive' });
                    window.open(URL.createObjectURL(file));
                }
            }
        };
        req.send();
    }

</script>

</html>