`<input type="file">` - HTML

Experiment: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.

`Informationen zu ausgewählten Dateien abrufen`

Die ausgewählten Dateien werden durch die HTMLInputElement.files-Eigenschaft des Elements zurückgegeben, die ein FileList-Objekt enthält, das eine Liste von File-Objekten enthält. Das FileList-Objekt verhält sich wie ein Array, sodass Sie seine length-Eigenschaft überprüfen können, um die Anzahl der ausgewählten Dateien zu ermitteln.

Jedes File-Objekt enthält die folgenden Informationen: name Der Name der Datei. lastModified Eine Zahl, die das Datum und die Uhrzeit angibt, zu der die Datei zuletzt geändert wurde, in Millisekunden seit der UNIX-Epoche (1. Januar 1970, Mitternacht). lastModifiedDate Veraltet Ein Date-Objekt, das das Datum und die Uhrzeit darstellt, zu der die Datei zuletzt geändert wurde. Dies ist veraltet und sollte nicht verwendet werden. Verwenden Sie stattdessen lastModified. size Die Größe der Datei in Bytes. type Der MIME-Typ der Datei. webkitRelativePath Nicht standardisiert Ein String, der den Pfad der Datei relativ zum Basispfad angibt, der in einem Verzeichnisauswahlfenster ausgewählt wurde (das heißt, einem Datei-Auswahlfenster, in dem das webkitdirectory-Attribut gesetzt ist). Dies ist nicht standardmäßig und sollte mit Vorsicht verwendet werden.

`Akzeptierte Dateitypen einschränken`

Oft möchten Sie nicht, dass der Benutzer jeden beliebigen Dateityp auswählen kann; stattdessen möchten Sie oft, dass er Dateien eines bestimmten Typs oder bestimmter Typen auswählt. Wenn Ihr Datei-Input beispielsweise dem Benutzer erlaubt, ein Profilbild hochzuladen, möchten Sie wahrscheinlich, dass er webkompatible Bildformate wie JPEG oder PNG auswählt.

Zulässige Dateitypen können mit dem accept-Attribut angegeben werden, das eine durch Kommas getrennte Liste zulässiger Dateinamenerweiterungen oder MIME-Typen erfordert. Einige Beispiele: accept="image/png" oder accept=".png" — Akzeptiert PNG-Dateien. accept="image/png, image/jpeg" oder accept=".png, .jpg, .jpeg" — Akzeptiert PNG- oder JPEG-Dateien. accept="image/*" — Akzeptiert jede Datei mit einem image/*-MIME-Typ. (Viele mobile Geräte erlauben dem Benutzer auch, ein Bild mit der Kamera zu machen, wenn dies verwendet wird.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Akzeptiert alles, was nach einem MS-Word-Dokument riecht. Sehen wir uns ein vollständigeres Beispiel an: html Choose file to upload div { margin-bottom: 10px; } Dies erzeugt eine ähnlich aussehende Ausgabe wie das vorherige Beispiel: Hinweis: Sie können dieses Beispiel auch auf GitHub finden — siehe den Quellcode, und sehen Sie es auch live. Es sieht vielleicht ähnlich aus, aber wenn Sie versuchen, mit diesem Input eine Datei auszuwählen, werden Sie feststellen, dass der Dateiauswahler nur die Dateitypen auswählen lässt, die im accept-Wert angegeben sind (die genaue Oberfläche unterscheidet sich je nach Browser und Betriebssystem). Das accept-Attribut validiert nicht die Typen der ausgewählten Dateien; es gibt den Browsern Hinweise, um die Benutzer bei der Auswahl der richtigen Dateitypen zu führen. Es ist in den meisten Fällen immer noch möglich, dass Benutzer eine Option im Dateiauswahlfenster umschalten können, die es ihnen ermöglicht, dies zu überschreiben und jede beliebige Datei auszuwählen, die sie möchten, und dann die falschen Dateitypen auszuwählen. Aus diesem Grund sollten Sie sicherstellen, dass das accept-Attribut mit einer entsprechenden serverseitigen Validierung gestützt wird.

`Erkennung von Abbrüchen`

Das cancel-Ereignis wird ausgelöst, wenn der Benutzer seine Auswahl nicht ändert und die vorher ausgewählten Dateien erneut auswählt. Das cancel-Ereignis wird auch ausgelöst, wenn das Dateiauswahl-Dialogfeld durch die Schaltfläche "Abbrechen" oder die Escape-Taste geschlossen oder abgebrochen wird.

Beispielsweise wird der folgende Code in die Konsole protokollieren, wenn der Benutzer das Popup schließt, ohne eine Datei auszuwählen: js const elem = document.createElement("input"); elem.type = "file"; elem.addEventListener("cancel", () => { console.log("Cancelled."); }); elem.addEventListener("change", () => { if (elem.files.length === 1) { console.log("File selected: ", elem.files[0]); } }); elem.click();

`Anmerkungen`

Sie können den Wert eines Datei-Auswählers nicht aus einem Script heraus setzen — etwas wie das Folgende hat keine Wirkung: js const input = document.querySelector("input[type=file]"); input.value = "foo"; Wenn eine Datei über ein ausgewählt wird, wird aus offensichtlichen Sicherheitsgründen nicht der echte Pfad zur Quelldatei im value-Attribut der Eingabe angezeigt. Stattdessen wird der Dateiname angezeigt, mit C:\fakepath\ davor. Es gibt einige historische Gründe für diese Eigenart, aber sie ist in allen modernen Browsern unterstützt, und sie ist tatsächlich in der Spezifikation definiert.

`Beispiele`

In diesem Beispiel präsentieren wir einen etwas fortgeschritteneren Dateiauswähler, der die in der HTMLInputElement.files-Eigenschaft verfügbaren Dateiinformationen nutzt und auch ein paar clevere Tricks zeigt.

Hinweis: Sie können den vollständigen Quellcode für dieses Beispiel auf GitHub sehen — file-example.html (sehen Sie es auch live). Wir werden das CSS nicht erklären; der Fokus liegt auf dem JavaScript. Zunächst werfen wir einen Blick auf das HTML: html Choose images to upload (PNG, JPG) No files currently selected for upload html { font-family: sans-serif; } form { background: #ccc; margin: 0 auto; padding: 20px; border: 1px solid black; } form ol { padding-left: 0; } form li, div > p { background: #eee; display: flex; justify-content: space-between; margin-bottom: 10px; list-style-type: none; border: 1px solid black; } form img { height: 64px; order: 1; } form p { line-height: 32px; padding-left: 10px; } form label, form button { background-color: #7f9ccb; padding: 5px 10px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto; } form label:hover, form button:hover { background-color: #2d5ba3; color: white; } form label:active, form button:active { background-color: #0d3f8f; color: white; } Dies ist ähnlich zu dem, was wir bereits gesehen haben — nichts Besonderes, was kommentiert werden müsste. Als Nächstes gehen wir durch das JavaScript. In den ersten Zeilen des Scripts erhalten wir Referenzen auf die Formulareingabe selbst und das -Element mit der Klasse .preview. Danach verstecken wir das -Element — wir tun dies, weil Datei-Inputs dazu neigen, hässlich, schwer zu gestalten und in ihrem Design über verschiedene Browser hinweg inkonsistent zu sein. Sie können das input-Element durch Klicken auf dessen aktivieren, sodass es besser ist, das input visuell zu verstecken und das Label wie eine Schaltfläche zu gestalten, damit der Benutzer weiß, dass er darauf klicken muss, wenn er Dateien hochladen möchte. js const input = document.querySelector("input"); const preview = document.querySelector(".preview"); input.style.opacity = 0; Hinweis: opacity wird verwendet, um die Datei-Input zu verstecken, anstelle von visibility: hidden oder display: none, weil assistive Technologie die letzten beiden Stile interpretiert als ob der Datei-Input nicht interaktiv sei. Als Nächstes fügen wir dem Input einen Event Listener hinzu, um auf Änderungen der ausgewählten Werte zu hören (in diesem Fall, wenn Dateien ausgewählt werden). Der Event Listener ruft unsere benutzerdefinierte updateImageDisplay()-Funktion auf. js input.addEventListener("change", updateImageDisplay); Wann immer die updateImageDisplay()-Funktion aufgerufen wird, ... Verwenden wir eine while-Schleife, um den bisherigen Inhalt des Vorschau- zu leeren. Wir holen das FileList-Objekt, das die Informationen über alle ausgewählten Dateien enthält, und speichern es in einer Variablen namens curFiles. Wir überprüfen, ob keine Dateien ausgewählt wurden, indem wir überprüfen, ob curFiles.length gleich 0 ist. Falls ja, drucken wir eine Nachricht in das Vorschau- , die besagt, dass keine Dateien ausgewählt wurden. Wenn Dateien ausgewählt wurden, durchlaufen wir jede einzelne und drucken Informationen darüber in das Vorschau- . Beachten Sie hier: Wir verwenden die benutzerdefinierte validFileType()-Funktion, um zu überprüfen, ob die Datei den richtigen Typ hat (z.B. die im accept-Attribut angegebenen Bildtypen). Wenn sie es ist: Drucken wir ihren Namen und ihre Dateigröße in einen Listeneintrag im vorherigen (erhalten von file.name und file.size). Die benutzerdefinierte returnFileSize()-Funktion gibt eine schön formatierte Version der Größe in Bytes/KB/MB zurück (standardmäßig gibt der Browser die Größe in absoluten Bytes zurück). Erstellen wir eine Miniaturvorschau des Bildes, indem wir URL.createObjectURL(file) aufrufen. Dann fügen wir das Bild ebenfalls in den Listeneintrag ein, indem wir eine neue erstellen und ihr src auf das Thumbnail setzen. Wenn der Dateityp ungültig ist, zeigen wir eine Nachricht in einem Listeneintrag an, die dem Benutzer mitteilt, dass er einen anderen Dateityp auswählen muss. js function updateImageDisplay() { while (preview.firstChild) { preview.removeChild(preview.firstChild); } const curFiles = input.files; if (curFiles.length === 0) { const para = document.createElement("p"); para.textContent = "No files currently selected for upload"; preview.appendChild(para); } else { const list = document.createElement("ol"); preview.appendChild(list); for (const file of curFiles) { const listItem = document.createElement("li"); const para = document.createElement("p"); if (validFileType(file)) { para.textContent = `File name ${file.name}, file size ${returnFileSize( file.size, )}.`; const image = document.createElement("img"); image.src = URL.createObjectURL(file); image.alt = image.title = file.name; listItem.appendChild(image); listItem.appendChild(para); } else { para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`; listItem.appendChild(para); } list.appendChild(listItem); } } } Die benutzerdefinierte validFileType()-Funktion nimmt ein File-Objekt als Parameter und verwendet Array.prototype.includes(), um zu überprüfen, ob einer der Werte in den fileTypes den type-Eigenschaften der Datei entspricht. Wenn ein Treffer gefunden wird, gibt die Funktion true zurück. Wenn kein Treffer gefunden wird, gibt sie false zurück. js // https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types const fileTypes = [ "image/apng", "image/bmp", "image/gif", "image/jpeg", "image/pjpeg", "image/png", "image/svg+xml", "image/tiff", "image/webp", "image/x-icon", ]; function validFileType(file) { return fileTypes.includes(file.type); } Die returnFileSize()-Funktion nimmt eine Zahl (in Bytes, entnommen von der size-Eigenschaft der aktuellen Datei) und wandelt sie in eine schön formatierte Größe in Bytes/KB/MB um. js function returnFileSize(number) { if (number < 1e3) { return `${number} bytes`; } else if (number >= 1e3 && number < 1e6) { return `${(number / 1e3).toFixed(1)} KB`; } return `${(number / 1e6).toFixed(1)} MB`; } Hinweis: Die "KB"- und "MB"-Einheiten hier verwenden die SI-Prefix-Konvention von 1KB = 1000B, ähnlich wie macOS. Verschiedene Systeme repräsentieren Dateigrößen unterschiedlich — zum Beispiel verwendet Ubuntu IEC-Präfixe, bei denen 1KiB = 1024B ist, während RAM-Spezifikationen oft SI-Präfixe verwenden, um Potenzen von zwei darzustellen (1KB = 1024B). Aus diesem Grund haben wir 1e3 (1000) und 1e6 (100000) anstelle von 1024 und 1048576 verwendet. In Ihrer Anwendung sollten Sie das Einheitensystem klar kommunizieren, wenn die genaue Größe wichtig ist. const button = document.querySelector("form button"); button.addEventListener("click", (e) => { e.preventDefault(); const para = document.createElement("p"); para.append("Image uploaded!"); preview.replaceChildren(para); }); Das Beispiel sieht so aus, probieren Sie es aus:

`Technische Zusammenfassung`

Wert	Ein String, der den Pfad zur ausgewählten Datei darstellt.
Ereignisse	[`change`](/de/docs/Web/API/HTMLElement/change_event), [`input`](/de/docs/Web/API/Element/input_event) und [`cancel`](/de/docs/Web/API/HTMLInputElement/cancel_event)
Unterstützte allgemeine Attribute	`required`
Zusätzliche Attribute	`accept`, `capture`, `multiple`
IDL Attribute	`files` und `value`
DOM-Schnittstelle	[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)
Methoden	[`select()`](/de/docs/Web/API/HTMLInputElement/select)
Implizite ARIA-Rolle	Keine entsprechende Rolle

`Spezifikationen`

Specification
HTML # file-upload-state-(type=file)

`Browser-Kompatibilität`

Siehe auch Verwendung von Dateien aus Webanwendungen — enthält eine Reihe anderer nützlicher Beispiele im Zusammenhang mit und der File API. MDN-Feedback-Box War diese Übersetzung hilfreich? Diese Seite wurde automatisch aus dem Englischen übersetzt. Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden