Wie kann ich den Fortschritt von XMLHttpRequest-Vorgängen verfolgen, insbesondere beim Hoch- und Herunterladen großer Dateien?

Überwachen des XMLHttpRequest-Fortschritts: Ein umfassender Leitfaden

Der standardmäßigen XMLHttpRequest-API (XHR) fehlt die integrierte Unterstützung für die Fortschrittsverfolgung, was die Bemühungen zur Anzeige von Fortschrittsbalken bei großen Dateien erschwert Uploads. Zahlreiche Browser bieten jedoch nicht standardmäßige Erweiterungen an, die eine Fortschrittsüberwachung ermöglichen.

Hochgeladene Bytes

Um den Fortschritt der hochgeladenen Bytes zu überwachen, verwenden Sie das Ereignis xhr.upload.onprogress . Der Browser kennt sowohl die Größe der hochgeladenen Datei als auch die bereits übertragene Datenmenge und ermöglicht so die Bestimmung des Upload-Fortschritts.

Heruntergeladene Bytes

Bestimmung der Der Fortschritt der heruntergeladenen Bytes (bei Verwendung von xhr.responseText) ist komplexer, da der Browser keine Vorkenntnisse über die Gesamtgröße der übertragenen Daten hat. Eine Lösung besteht darin, im Serverskript einen Content-Length-Header festzulegen, um die erwartete Gesamtbytegröße anzugeben.

Wenn unser Serverskript beispielsweise eine 5-Sekunden-ZIP-Datei liest, können wir den Header wie folgt festlegen :

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

Durch das Setzen des Headers kann der Browser die Gesamtlänge der Antwort ermitteln und die empfangenen Bytes entsprechend überwachen.

Ereignisüberwachung

Um den Fortschritt von Uploads und Downloads zu überwachen, verwenden Sie die folgenden Ereignis-Listener:

<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>

Beispiel

Dieses Beispiel demonstriert die Fortschrittsüberwachung während eines Dateidownloads mit Fortschrittsbalken der jQuery-Benutzeroberfläche:

<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>

Durch die Integration dieser Techniken können Sie den Fortschritt von XMLHttpRequest-Vorgängen effektiv überwachen und so eine benutzerfreundlichere Erfahrung bei großen Dateiübertragungen ermöglichen.

Das obige ist der detaillierte Inhalt vonWie kann ich den Fortschritt von XMLHttpRequest-Vorgängen verfolgen, insbesondere beim Hoch- und Herunterladen großer Dateien?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!