顯示使用XHR2/AJAX下載文件的進度條

Question

我試圖使用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> 

Answer 1

如果你想顯示用戶下載過程的進度條 - 你必須做的XMLHttpRequest內下載。其中一個問題是，如果文件很大 - 在瀏覽器將它們寫入磁盤之前，它們將被保存在瀏覽器的內存中（當使用常規下載文件直接保存到磁盤時在大文件上節省大量內存）。

另一個重要的事情要注意 - 爲了使lengthComputable成立，您的服務器必須發送文件大小爲Content-Length的標頭。

下面是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> 

這裏是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); 

注意，我添加了一個睡眠模擬連接速度慢在本地主機上進行測試。
你應該刪除此生產:)