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: Dieses Feature ist verfügbar in Web Workers, außer in Service Workers.

Die XMLHttpRequestUpload Schnittstelle repräsentiert den Hochladeprozess für einen spezifischen XMLHttpRequest. Es ist ein opakes Objekt, das den zugrunde liegenden, browserabhängigen Hochladeprozess darstellt. Es ist ein XMLHttpRequestEventTarget und kann durch Aufrufen von XMLHttpRequest.upload erhalten werden.

Instanz-Eigenschaften

Diese Schnittstelle hat keine spezifischen Eigenschaften, erbt jedoch die Eigenschaften von XMLHttpRequestEventTarget und von EventTarget.

Instanz-Methoden

Diese Schnittstelle hat keine spezifischen Methoden, erbt jedoch die Methoden von XMLHttpRequestEventTarget und von EventTarget.

Ereignisse

abort: Wird ausgelöst, wenn eine Anfrage abgebrochen wurde, zum Beispiel, weil das Programm XMLHttpRequest.abort() aufgerufen hat. Auch über die onabort Ereignishandler-Eigenschaft verfügbar.
error: Wird ausgelöst, wenn die Anfrage auf einen Fehler gestoßen ist. Auch über die onerror Ereignishandler-Eigenschaft verfügbar.
load: Wird ausgelöst, wenn eine Anfragetransaktion erfolgreich abgeschlossen wurde. Auch über die onload Ereignishandler-Eigenschaft verfügbar.
loadend: Wird ausgelöst, wenn eine Anfrage abgeschlossen wurde, egal ob erfolgreich (nach load) oder erfolglos (nach abort oder error). Auch über die onloadend Ereignishandler-Eigenschaft verfügbar.
loadstart: Wird ausgelöst, wenn eine Anfrage begonnen hat Daten zu laden. Auch über die onloadstart Ereignishandler-Eigenschaft verfügbar.
progress: Wird regelmäßig ausgelöst, wenn eine Anfrage mehr Daten erhält. Auch über die onprogress Ereignishandler-Eigenschaft verfügbar.
timeout: Wird ausgelöst, wenn der Fortschritt beendet wird, da die voreingestellte Zeit abgelaufen ist. Auch über die ontimeout Ereignishandler-Eigenschaft verfügbar.

Beispiele

Hochladen einer Datei mit einem Zeitlimit

Dies ermöglicht Ihnen das Hochladen einer Datei auf einen Server; es zeigt einen Fortschrittsbalken während des Hochladens, sowie eine Nachricht mit dem Fortschritt und den Ergebnissen, Erfolg oder Misserfolg. Eine Abbrechen-Schaltfläche ermöglicht das Stoppen eines Uploads.

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 />
      </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 Standard # xmlhttprequestupload

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

XMLHttpRequest