Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
XMLHttpRequestUpload
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Hinweis: Diese Funktion ist inWeb Workers verfügbar, mit Ausnahme vonService Workers.
DieXMLHttpRequestUpload-Schnittstelle repräsentiert den Upload-Prozess für ein spezifischesXMLHttpRequest. Es ist einintransparentes Objekt, das den darunterliegenden, browserabhängigen Upload-Prozess darstellt. Es ist einXMLHttpRequestEventTarget und kann durch den Aufruf vonXMLHttpRequest.upload erhalten werden.
Instanz-Eigenschaften
Diese Schnittstelle hat keine spezifischen Eigenschaften, sondern erbt die Eigenschaften vonXMLHttpRequestEventTarget und vonEventTarget.
Instanz-Methoden
Diese Schnittstelle hat keine spezifischen Methoden, sondern erbt die Methoden vonXMLHttpRequestEventTarget und vonEventTarget.
Ereignisse
Diese Schnittstelle hat keine spezifischen Ereignisse, aber erbt die Ereignisse vonXMLHttpRequestEventTarget.
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
<!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" /> </p> <p> <progress></progress> </p> <p> <output></output> </p> <p> <button disabled>Abort</button> </p> </main> </body></html>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
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 |