下载文件时显示进度条答案

【问题标题】：Show progress bar while a file is being downloaded下载文件时显示进度条
【发布时间】：2016-07-30 12:41:12
【问题描述】：

目标：

我想在下载文件时显示进度条。

到目前为止我尝试过的：

AJAX 代码：

    $.ajax({
            async: true,
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                console.log(xhr);
                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) { 
                        var percentComplete = (evt.loaded / evt.total) *100;
                        $("div.progress > div.progress-bar").css({ "width": percentComplete + "%" }); 
                    } 
                },false);
            return xhr;
            }, 
            url: $("#CardExportCardsForm").attr('action'),
            data: $("#CardExportCardsForm").serialize(),
            success: function(data){
                //console.log(data);
            }


        });

HTML 代码：

进度条：

 <div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    </div> 
</div>

我面临的问题：

AJAX 请求运行良好。它正在获得成功响应，并且文件正在成功。

但是，它没有在任何地方显示下载进度。我什至尝试在日志中打印百分比完成，但无济于事。

任何帮助将不胜感激。

提前致谢！

【问题讨论】：

您确定要下载而不是上传吗？您正在将表单数据发送到服务器 - 这将是一个上传。您是否从服务器接收到（大）文件/资源作为响应（这可能被视为“下载”）？
如果要监控表单数据的上传进度，则需要将progresshandler绑定到XMLHttpRequest.upload，见developer.mozilla.org/de/docs/Web/API/XMLHttpRequest/…
不是上传的。让我澄清一下。我的表单数据有一个隐藏字段，其中包含图像列表，例如 img1、img2、img3..etc。现在，在另一个页面中，我正在尝试检索具有这些名称的所有文件，然后以 zip 格式下载相应的图像。
什么“其他页面”？而且您通常不会通过 AJAX 进行下载 - 因为那样您只会在 in 脚本中获得结果，它不会触发下载对话框，因为它是后台请求.
为了有人能够帮助您，您至少必须展示您的“操作”在服务器端正在做什么，以及您的浏览器环境是什么样的（请参阅答案@BharatJain）。

标签： php ajax cakephp

【解决方案1】：

ProgressEvent.lengthComputable 只读属性是一个布尔值指示 ProgressEvent 所涉及的资源是否具有可以计算的长度。如果不是，则 ProgressEvent.total 财产没有重大价值。

它不兼容所有浏览器，您可以查看here

【讨论】：