Javascript 显示使用XHR2/AJAX下载文件的进度条

我正在尝试使用Ajax下载文件，并显示自定义的下载进度条。

问题是我不明白怎么做。我写了代码来记录进度，但不知道如何启动下载

注意：文件类型不同

提前谢谢

JS

// Downloading of files
filelist.on('click', '.download_link', function(e){
    e.preventDefault();
    var id = $(this).data('id');
    $(this).parent().addClass("download_start");

    $.ajax({
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            // Handle Download Progress
            xhr.addEventListener("progress", function (evt) {
                if(evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    console.log(percentComplete);
                }
            }, false);
            return xhr;
        },
        complete: function () {
            console.log("Request finished");
        }
    })
});

HTML和PHP

    <li>
    <div class="f_icon"><img src="' . $ico_path . '"></div>
    <div class="left_wing">
       <div class="progressbar"></div>
       <a class="download_link" href="#" id="'.$file_id.'"><div class="f_name">' . $full_file_name . '</div></a>
       <div class="f_time_size">' . date("M d, Y", $file_upload_time) . '&nbsp; &#149; &nbsp;' . human_filesize($file_size) . '</div>
    </div>

    <div class="right_wing">
       <div class="f_delete">
       <a class="btn btn-danger" href="#" aria-label="Delete" data-id="'.$file_id.'" data-filename="'.$full_file_name.'"><i class="fa fa-trash-o fa-lg" aria-hidden="true" title="Delete this?"></i>
       </a>
    </div>
   </div>
    </li>

' . 日期（“md，Y”，$file\u upload\u time）。'•  ' . 人工文件大小（$file\u size）。'

如果要向用户显示下载过程的进度条，则必须在xmlhttprequest中进行下载。这里的一个问题是，如果您的文件很大，则在浏览器将其写入磁盘之前，它们将保存在浏览器的内存中（使用常规下载时，文件将直接保存到磁盘，这会在大文件上节省大量内存）

另一个需要注意的重要事项是，为了使

长度可计算

为真，服务器必须发送带有文件大小的

内容长度

头

以下是javascript代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1" data-filename="filename.xml">Click to download</div>
<script>
$('#a1').click(function() {
    var that = this;
    var page_url = 'download.php';

    var req = new XMLHttpRequest();
    req.open("POST", page_url, true);
    req.addEventListener("progress", function (evt) {
        if(evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            console.log(percentComplete);
        }
    }, 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>

点击下载
$（'#a1'）。单击（函数（）{
var=这个；
var page_url='download.php'；
var req=新的XMLHttpRequest（）；
请求打开（“POST”，页面url，true）；
请求addEventListener（“进度”，功能（evt）{
if（evt.长度可计算）{
var percentComplete=evt.loaded/evt.total；
控制台日志（完成百分比）；
}
}，假）；
req.responseType=“blob”；
req.onreadystatechange=函数（）{
如果（req.readyState==4&&req.status==200）{
var filename=$（that.data（'filename'）；
if（typeof window.chrome！=“未定义”）{
//铬版
var link=document.createElement（'a'）；
link.href=window.URL.createObjectURL（请求响应）；
link.download=文件名；
link.click（）；
}else if（typeof window.navigator.msSaveBlob！=“未定义”）{
//IE版本
var blob=new blob（[req.response]，{type:'application/force download'}）；
window.navigator.msSaveBlob（blob，文件名）；
}否则{
//火狐版本
var file=新文件（[req.response]，文件名，{type:'application/force download'}）；
open（URL.createObjectURL（文件））；
}
}
};
请求发送（）；
});

下面是一个可以使用的php代码示例：

<?php
$filename = "some-big-file";
$filesize = filesize($filename);

header("Content-Transfer-Encoding: Binary");
header("Content-Length:". $filesize);
header("Content-Disposition: attachment");

$handle = fopen($filename, "rb");
if (FALSE === $handle) {
    exit("Failed to open stream to URL");
}

while (!feof($handle)) {
    echo fread($handle, 1024*1024*10);
    sleep(3);
}

fclose($handle);

---

您如何将下载的文件发送给用户？如果您问我如何下载文件，那么这就是我想知道的我应该如何下载文件。看起来您是在问如何显示进度，但在二读时，这是下载的额外内容。简单回答：不要使用ajax下载文件，使用浏览器<代码>

是的，这显然可以做到，但我需要显示下载进度，因为这是UIT的一部分。这里有一个答案，但这里有一个更好的讨论使用ajax@Dekel这对我跟踪每小时的下载速度有很大帮助MB@AhmedAli很高兴这有帮助：）健康有益的例子。非常感谢。如果文件足够大，那么把它放在RAM中是不好的。如果它很小，那么progressbar就不是很有用。这似乎不是个好主意+1用于研究和示例。