显示使用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

  
 
 
 
 
' . $full_file_name . ' 
' . date("M d, Y", $file_upload_time) . '  •  ' . human_filesize($file_size) . '
 
 
 
   
 
  

Answer 1

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

另一个需要注意的重要事项 – 为了使lengthComputable为true – 您的服务器必须发送带有文件大小的Content-Length标头。

这是javascript代码：

  
Click to download
  

以下是您可以使用的PHP代码的示例：

请注意，我添加了一个睡眠模拟缓慢连接以在localhost上进行测试。
你应该删除生产:)