Monitoring XMLHttpRequest Progress: A Comprehensive Guide

The standard XMLHttpRequest (XHR) API lacks built-in support for progress tracking, impeding efforts to display progress bars during large file uploads. However, numerous browsers offer non-standard extensions that enable progress monitoring.

Bytes Uploaded

To monitor the progress of bytes uploaded, utilize the xhr.upload.onprogress event. The browser knows both the size of the file being uploaded and the amount of data already transmitted, making it possible to determine the upload progress.

Bytes Downloaded

Determining the progress of bytes downloaded (when using xhr.responseText) is more complex because the browser has no prior knowledge of the total size of the data being transferred. One solution is to set a Content-Length header in the server script to specify the total byte size expected.

For instance, if our server script reads a 5-second ZIP file, we can set the header as follows:

<code class="php">$filesize = filesize('test.zip');
header("Content-Length: " . $filesize); // Set header length
readfile('test.zip');
exit 0;</code>

By setting the header, the browser can determine the total length of the response and monitor the received bytes accordingly.

Event Monitoring

To monitor the progress of both uploads and downloads, use the following event listeners:

<code class="javascript">// Event listener for upload progress
xhr.upload.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var uploadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};

// Event listener for download progress
xhr.onprogress = function(evt) {
  if (evt.lengthComputable) {
    var downloadPercentage = (evt.loaded / evt.total) * 100;
    // Update progress bar or display percentage
  }
};</code>

Example

This example demonstrates progress monitoring during a file download using jQuery UI's progress bar:

<code class="javascript">function updateProgress(evt) {
  if (evt.lengthComputable) {
    var percentComplete = (evt.loaded / evt.total) * 100;
    $('#progressbar').progressbar("option", "value", percentComplete);
  }
}

function sendRequest() {
  var req = new XMLHttpRequest();
  $('#progressbar').progressbar();
  req.onprogress = updateProgress;
  req.onloadstart = function() {
    updateProgress({ loaded: 0, total: 0 });
  };
  req.open('GET', 'test.php', true);
  req.send();
}

// Sending the request
sendRequest();</code>

By incorporating these techniques, you can effectively monitor the progress of XMLHttpRequest operations, enabling a more user-friendly experience during large file transfers.

The above is the detailed content of How can I track the progress of XMLHttpRequest operations, especially for large file uploads and downloads?. For more information, please follow other related articles on the PHP Chinese website!