XMLHttpRequestUpload

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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

Die XMLHttpRequestUpload-Schnittstelle repräsentiert den Upload-Prozess für ein spezifisches XMLHttpRequest. Es ist ein intransparentes Objekt, das den darunterliegenden, browserabhängigen Upload-Prozess darstellt. Es ist ein XMLHttpRequestEventTarget und kann durch den Aufruf von XMLHttpRequest.upload erhalten werden.

EventTarget XMLHttpRequestEventTarget XMLHttpRequestUpload

In diesem Artikel

Instanz-Eigenschaften

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

Instanz-Methoden

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

Ereignisse

Diese Schnittstelle hat keine spezifischen Ereignisse, aber erbt die Ereignisse von XMLHttpRequestEventTarget.

Beispiele

Hochladen einer Datei mit einem Timeout

Damit können Sie eine Datei zu einem Server hochladen; während des Uploads wird eine Fortschrittsanzeige angezeigt sowie eine Nachricht mit dem Fortschritt und den Ergebnissen, Erfolg oder Misserfolg. Ein Abbrechen-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;
}

progress {
  display: none;
}

progress.visible {
  display: inline;
}

JavaScript

js
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);
});

XMLHttpRequest

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

XMLHttpRequest API
XMLHttpRequestUpload
Vererbung
1. XMLHttpRequestEventTarget
2. EventTarget
Verwandte Seiten für XMLHttpRequest API
Anleitungen
1. Verwendung von XMLHttpRequest
2. HTML in XMLHttpRequest
3. Synchrone und asynchrone Anfragen
4. Senden und Empfangen von Binärdaten
5. Verwenden von FormData-Objekten