XMLHttpRequestUpload

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Hinweis: Diese Funktion ist in Web Workers verfügbar, mit Ausnahme von Service Workers.

Das XMLHttpRequestUpload Interface repräsentiert den Upload-Vorgang für ein spezifisches XMLHttpRequest. Es ist ein opakes Objekt, das den zugrunde liegenden, browserabhängigen Upload-Prozess darstellt. Es ist ein XMLHttpRequestEventTarget und kann durch Aufrufen von XMLHttpRequest.upload erhalten werden.

Instanzeigenschaften

Dieses Interface hat keine spezifische Eigenschaft, erbt jedoch die Eigenschaften von XMLHttpRequestEventTarget und von EventTarget.

Instanzmethoden

Dieses Interface hat keine spezifische Methode, erbt jedoch die Methoden von XMLHttpRequestEventTarget und von EventTarget.

Ereignisse

abort: Tritt auf, wenn eine Anforderung abgebrochen wurde, zum Beispiel weil das Programm XMLHttpRequest.abort() aufgerufen hat. Auch verfügbar über die onabort Ereignis-Handler-Eigenschaft.
error: Tritt auf, wenn die Anforderung auf einen Fehler gestoßen ist. Auch verfügbar über die onerror Ereignis-Handler-Eigenschaft.
load: Tritt auf, wenn eine Anforderungstransaktion erfolgreich abgeschlossen wurde. Auch verfügbar über die onload Ereignis-Handler-Eigenschaft.
loadend: Tritt auf, wenn eine Anforderung abgeschlossen wurde, egal ob erfolgreich (nach load) oder erfolglos (nach abort oder error). Auch verfügbar über die onloadend Ereignis-Handler-Eigenschaft.
loadstart: Tritt auf, wenn eine Anforderung begonnen hat, Daten zu laden. Auch verfügbar über die onloadstart Ereignis-Handler-Eigenschaft.
progress: Tritt periodisch auf, wenn eine Anforderung mehr Daten empfängt. Auch verfügbar über die onprogress Ereignis-Handler-Eigenschaft.
timeout: Tritt auf, wenn der Fortschritt aufgrund abgelaufener voreingestellter Zeit beendet wird. Auch verfügbar über die ontimeout Ereignis-Handler-Eigenschaft.

Beispiele

Hochladen einer Datei mit einem Timeout

Dies ermöglicht Ihnen, eine Datei auf einen Server hochzuladen; es zeigt eine Fortschrittsanzeige, während der Upload durchgeführt wird, sowie eine Nachricht mit dem Fortschritt und den Ergebnissen, Erfolg oder Misserfolg. Ein Abbruch-Button ermöglicht es, einen Upload zu stoppen.

HTML

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>XMLHttpRequestUpload test</title>
    <link rel="stylesheet" href="xhrupload_test.css" />
    <script src="xhrupload_test.js"></script>
  </head>
  <body>
    <main>
      <h1>Upload a file</h1>
      <p>
        <label for="file">File to upload</label><input type="file" id="file" />
      </p>
      <p>
        <progress></progress>
      </p>
      <p>
        <output></output>
      </p>
      <p>
        <button disabled id="abort">Abort</button>
      </p>
    </main>
  </body>
</html>

CSS

css

body {
  background-color: lightblue;
}

main {
  margin: 50px auto;
  text-align: center;
}

#file {
  display: none;
}

label[for="file"] {
  background-color: lightgrey;
  padding: 10px 10px;
}

progress {
  display: none;
}

progress.visible {
  display: inline;
}

JavaScript

addEventListener("DOMContentLoaded", () => {
  const fileInput = document.getElementById("file");
  const progressBar = document.querySelector("progress");
  const log = document.querySelector("output");
  const abortButton = document.getElementById("abort");

  fileInput.addEventListener("change", () => {
    const xhr = new XMLHttpRequest();
    xhr.timeout = 2000; // 2 seconds

    // Link abort button
    abortButton.addEventListener(
      "click",
      () => {
        xhr.abort();
      },
      { once: true },
    );

    // When the upload starts, we display the progress bar
    xhr.upload.addEventListener("loadstart", (event) => {
      progressBar.classList.add("visible");
      progressBar.value = 0;
      progressBar.max = event.total;
      log.textContent = "Uploading (0%)…";
      abortButton.disabled = false;
    });

    // Each time a progress event is received, we update the bar
    xhr.upload.addEventListener("progress", (event) => {
      progressBar.value = event.loaded;
      log.textContent = `Uploading (${(
        (event.loaded / event.total) *
        100
      ).toFixed(2)}%)…`;
    });

    // When the upload is finished, we hide the progress bar.
    xhr.upload.addEventListener("loadend", (event) => {
      progressBar.classList.remove("visible");
      if (event.loaded !== 0) {
        log.textContent = "Upload finished.";
      }
      abortButton.disabled = true;
    });

    // In case of an error, an abort, or a timeout, we hide the progress bar
    // Note that these events can be listened to on the xhr object too
    function errorAction(event) {
      progressBar.classList.remove("visible");
      log.textContent = `Upload failed: ${event.type}`;
    }
    xhr.upload.addEventListener("error", errorAction);
    xhr.upload.addEventListener("abort", errorAction);
    xhr.upload.addEventListener("timeout", errorAction);

    // Build the payload
    const fileData = new FormData();
    fileData.append("file", fileInput.files[0]);

    // Theoretically, event listeners could be set after the open() call
    // but browsers are buggy here
    xhr.open("POST", "upload_test.php", true);

    // Note that the event listener must be set before sending (as it is a preflighted request)
    xhr.send(fileData);
  });
});

Spezifikationen

Specification
XMLHttpRequest # xmlhttprequestupload

Browser-Kompatibilität

Siehe auch

XMLHttpRequest