js:在使用ajax下载文件时,当下载进度为100%时提示用户下载成功并调起另一个请求

¥5.00

使用场景如下:

用户在下载完成后需要删除或者标记用户已下载,只有下载完成才更改

用户未下载完成的都不算

Yanne T2 发布于1年前

最佳解决方案

ajax下载文件进度demo如下,不清楚留言问我

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>

        function download() {
            var request = new XMLHttpRequest();
            var file = document.getElementById("file").value;
            request.open('get', file, true);
            request.send();
            request.onreadystatechange = function () {
                if (request.readyState == 4) {//readyState=3时不兼容火狐和谷歌
                    var header = request.getAllResponseHeaders(); //获得所有的响应头信息  响应头里有Content-Length 文件总长度
                    var length = request.getResponseHeader('content-length'); //文件总长度
                    document.getElementById("header").value = header;//innerText不兼容火狐浏览器
                    console.log(length);
                }
            }

            request.addEventListener('progress', function (event) {
               
                if (event.lengthComputable) {
                    let percentComplete = event.loaded / event.total;

                    //已下载 除以 总长度就是当前下载进度 为1时表示下载完成
                    if (percentComplete == 1) {
                        finish();
                    }
                }
            }, false);
           
        }
        function finish() {
            alert("现在完成,你可以做其他的事情了!");
        }
    </script>
</head>
<body>
    <div>
        文件路径:<input type="text" id="file"  style="width:300px" /> <input type="button" onclick="download()" value="开始下载" /><br />
        <textarea id="header"  cols="60" rows="20"></textarea> 


    </div>
</body>
</html>

图片.png

哎呦喂 T0 被采纳率100%
2020-12-16 10:27
打赏 0 1
页面统计
893 访问
0 帮助
0.00 打赏

hierror 2019 © hierror.com 京ICP备13026190号-1

通知消息
  • 暂无任何消息