在不知道總檔案大小的情況下如何追蹤 XMLHttpRequest 中的下載進度？

監控 XMLHttpRequest 的進度

XMLHttpRequest (XHR) 提供了一種從 JavaScript 執行非同步請求的機制。雖然它支援使用 xhr.upload.onprogress 事件追蹤上傳進度，但由於缺乏有關要接收的總位元組數的信息，獲取下載進度並不那麼簡單。

追蹤上傳進度

取得上傳進度比較簡單。瀏覽器維護有關正在上傳的檔案大小和傳輸的資料量的信息，從而可以透過 xhr.upload.onprogress 事件獲取進度。

監控下載進度

對於下載來說，挑戰來自於瀏覽器無法知道傳入資料的大小。但是，可以透過在伺服器回應中設定 Content-Length 標頭來克服這個問題，該標頭指定要傳輸的資料的總大小。

伺服器端設定

伺服器端負責交付內容的程式碼應依照正在下載的檔案或資料的大小設定 Content-Length 標頭。範例：

$filesize = filesize('test.zip');

header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;

客戶端實作

設定Content-Length 標頭後，客戶端程式碼現在可以追蹤下載進度：

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded: Bytes received by the browser
    // evt.total: Total bytes defined by the header
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete);
  }
}

function sendreq(evt) {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.open('GET', 'test.php', true);
  req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4) {
      // Callback actions here
    }
  };
  req.send();
}

此程式碼使用jQuery UI 庫建立一個進度條，顯示接收資料時的進度百分比。透過利用 Content-Length 標頭，瀏覽器可以準確計算並顯示下載進度，這對於需要視覺進度指示器的大型檔案下載非常有用。

以上是在不知道總檔案大小的情況下如何追蹤 XMLHttpRequest 中的下載進度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！