<input type="file"> HTML-Attributwert

Probieren Sie es aus

<label for="avatar">Choose a profile picture:</label>

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Wert

Das value-Attribut eines Dateieingabefelds enthlt eine Zeichenkette, die den Pfad zu den ausgewhlten Dateien reprsentiert. Wenn noch keine Datei ausgewhlt ist, ist der Wert eine leere Zeichenkette (""). Wenn der Benutzer mehrere Dateien ausgewhlt hat, reprsentiert der value die erste Datei in der Liste der ausgewhlten Dateien. Die anderen Dateien knnen ber die Eigenschaft HTMLInputElement.files des Eingabefeldes identifiziert werden.

Zustzliche Attribute

Zustzlich zu den allgemeinen Attributen, die alle <input>-Elemente teilen, untersttzen Eingaben vom Typ file auch die folgenden Attribute.

accept

Der Wert des accept-Attributs ist eine Zeichenkette, die die Dateitypen definiert, die die Dateieingabe akzeptieren soll. Diese Zeichenkette ist eine durch Kommas getrennte Liste von einzigartigen Dateitypspezifizierern. Da ein gegebener Dateityp auf mehr als eine Weise identifiziert werden kann, ist es ntzlich, eine umfassende Menge von Typenspezifizierern bereitzustellen, wenn Dateien eines bestimmten Formats bentigt werden.

Zum Beispiel gibt es verschiedene Mglichkeiten, Microsoft Word-Dateien zu identifizieren. Eine Seite, die Word-Dateien akzeptiert, knnte ein <input> wie folgt verwenden:

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

capture

Der Wert des capture-Attributs ist eine Zeichenkette, die angibt, welche Kamera zur Aufnahme von Bild- oder Videodaten verwendet werden soll, wenn das accept-Attribut angibt, dass die Eingabe einer dieser Typen sein sollte. Ein Wert von user gibt an, dass die benutzerorientierte Kamera und/oder das Mikrofon verwendet werden soll. Ein Wert von environment gibt an, dass die nach auen gerichtete Kamera und/oder das Mikrofon verwendet werden soll. Wenn dieses Attribut fehlt, kann der User Agent selbst entscheiden, was zu tun ist. Wenn der angeforderte Modus nicht verfgbar ist, kann der User Agent auf seinen bevorzugten Standardmodus zurckgreifen.

multiple

Wenn das multiple Boolean-Attribut angegeben ist, erlaubt das Dateieingabefeld dem Benutzer, mehr als eine Datei auszuwhlen.

Nicht-standardisierte Attribute

Zustzlich zu den oben aufgelisteten Attributen sind die folgenden nicht-standardisierten Attribute in einigen Browsern verfgbar. Sie sollten versuchen, ihre Verwendung zu vermeiden, da es die Fhigkeit Ihres Codes einschrnkt, in Browsern, die sie nicht implementieren, zu funktionieren.

webkitdirectory

Das Boolean-Attribut webkitdirectory, falls vorhanden, gibt an, dass der Benutzer in der Dateiauswahloberflche nur Verzeichnisse auswhlen kann. Weitere Details und Beispiele finden Sie unter HTMLInputElement.webkitdirectory.

Einzigartige Dateitypspezifizierer

Ein einzigartiger Dateitypspezifizierer ist eine Zeichenkette, die eine Art von Datei beschreibt, die vom Benutzer in einem <input>-Element des Typs file ausgewhlt werden kann. Jeder einzigartige Dateitypspezifizierer kann eine der folgenden Formen annehmen:

• Eine gltige, nicht auf Gro-/Kleinschreibung achtende Dateierweiterung, die mit einem Punkt (".") beginnt. Zum Beispiel: .jpg, .pdf, oder .doc.
• Eine gltige MIME-Typ-Zeichenkette, ohne Erweiterungen.
• Die Zeichenkette audio/*, was "jede Audiodatei" bedeutet.
• Die Zeichenkette video/*, was "jede Videodatei" bedeutet.
• Die Zeichenkette image/*, was "jede Bilddatei" bedeutet.

Das accept-Attribut nimmt eine Zeichenkette, die einen oder mehrere dieser einzigartigen Dateitypspezifizierer als ihren Wert enthlt, getrennt durch Kommas. Zum Beispiel knnte ein Dateiauswahldialog, der Inhalte bentigt, die als Bild prsentiert werden knnen, einschlielich sowohl Standard-Bildformate als auch PDF-Dateien, so aussehen:

<input type="file" accept="image/*,.pdf" />

Verwendung von Dateieingaben

Ein grundlegendes Beispiel

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to upload</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

Dies erzeugt die folgende Ausgabe:

Unabhngig vom Gert oder Betriebssystem des Benutzers bietet die Dateieingabe eine Schaltflche, die einen Datei-Auswahldialog ffnet, der es dem Benutzer ermglicht, eine Datei auszuwhlen.

Das Einfgen des multiple-Attributs, wie oben gezeigt, spezifiziert, dass mehrere Dateien auf einmal ausgewhlt werden knnen. Der Benutzer kann mehrere Dateien aus dem Dateiauswahldialog auf jede Weise auswhlen, die ihre gewhlte Plattform zulsst (z.B. durch Drcken der Shift oder Steuerung-Taste und dann Klicken). Wenn Sie nur mchten, dass der Benutzer eine einzelne Datei pro <input> auswhlt, lassen Sie das multiple-Attribut weg.

Informationen zu ausgewhlten Dateien erhalten

Die ausgewhlten Dateien werden von der HTMLInputElement.files-Eigenschaft des Elements zurckgegeben, welches ein FileList-Objekt ist, das eine Liste von File-Objekten enthlt. Die FileList verhlt sich wie ein Array, sodass Sie ihre length-Eigenschaft berprfen knnen, um die Anzahl der ausgewhlten Dateien zu erhalten.

Jedes File-Objekt enthlt die folgenden Informationen:

name

Der Name der Datei.

lastModified

Eine Zahl, die das Datum und die Uhrzeit angibt, zu der die Datei zuletzt gendert wurde, in Millisekunden seit dem UNIX-Epoch-Zeitstempel (1. Januar 1970, Mitternacht).

lastModifiedDate

Ein Date-Objekt, das das Datum und die Uhrzeit angibt, zu der die Datei zuletzt gendert wurde. Dies ist veraltet und sollte nicht verwendet werden. Verwenden Sie stattdessen lastModified.

size

Die Gre der Datei in Bytes.

type

Der MIME-Typ der Datei.

webkitRelativePath

Eine Zeichenkette, die den Pfad der Datei relativ zum Basispfad im ausgewhlten Verzeichnisauswahldialog angibt (d.h. einem file-Auswahldialog, in dem das webkitdirectory-Attribut gesetzt ist). Dies ist nicht standardisiert und sollte mit Vorsicht verwendet werden.

Akzeptierte Dateitypen beschrnken

Oft mchten Sie nicht, dass der Benutzer einen beliebigen Dateityp auswhlt; stattdessen mchten Sie oft, dass er Dateien eines spezifischen Typs oder Typs auswhlt. Beispielsweise, wenn Ihre Dateieingabe es Benutzern ermglicht, ein Profilbild hochzuladen, mchten Sie wahrscheinlich, dass sie web-kompatible Bildformate auswhlen, wie JPEG oder PNG.

Akzeptable Dateitypen knnen mit dem accept-Attribut spezifiziert werden, das eine durch Kommas getrennte Liste von erlaubten Dateierweiterungen oder MIME-Typen annimmt. 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 Mobilgerte lassen den Benutzer auch ein Bild mit der Kamera aufnehmen, 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.

Schauen wir uns ein etwas vollstndigeres Beispiel an:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to upload</label>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

div {
  margin-bottom: 10px;
}

Dies erzeugt eine hnlich aussehende Ausgabe wie das vorherige Beispiel:

Es sieht vielleicht hnlich aus, aber wenn Sie versuchen, mit dieser Eingabe eine Datei auszuwhlen, werden Sie sehen, dass der Dateiauswahl-Dialog mit dem accept-Wert nur die Dateitypen zulsst, die im accept-Wert spezifiziert sind (die genaue Schnittstelle unterscheidet sich je nach Browser und Betriebssystem).

Das accept-Attribut validiert nicht die Typen der ausgewhlten Dateien; es bietet Hinweise fr Browser, um Benutzer dazu zu bringen, die richtigen Dateitypen auszuwhlen. Es ist (in den meisten Fllen) immer noch mglich, dass Benutzer in der Dateiauswahl eine Option umschalten knnen, die dies ermglicht und sie dann falsche Dateitypen auswhlen knnen.

Aus diesem Grund sollten Sie sicherstellen, dass das accept-Attribut durch geeignete serverseitige Validierung gesttzt wird.

Stornierungen erkennen

Das cancel-Ereignis wird ausgelst, wenn der Benutzer seine Auswahl nicht ndert und die zuvor ausgewhlten Dateien erneut auswhlt. Das cancel-Ereignis wird auch ausgelst, wenn der Dateiauswahldialog geschlossen oder ber die "Abbrechen"-Schaltflche oder die escape-Taste abgebrochen wird.

Zum Beispiel wird der folgende Code in der Konsole protokollieren, wenn der Benutzer das Popup schliet, ohne eine Datei auszuwhlen:

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();

Notizen

1. Sie knnen den Wert eines Datei-Auswahlfelds nicht ber ein Script setzen etwas wie das Folgende hat keinen Effekt:

   js

   const input = document.querySelector("input[type=file]");
   input.value = "foo";
   

2. Wenn eine Datei mit einer <input type="file"> ausgewhlt wird, wird der tatschliche Pfad zur Quelldatei aus offensichtlichen Sicherheitsgrnden nicht im value-Attribut der Eingabe angezeigt. Stattdessen wird der Dateiname angezeigt, dem C:\fakepath\ vorangestellt wird. Es gibt einige historische Grnde fr diese Besonderheit, aber sie wird in allen modernen Browsern untersttzt und ist tatschlich in der Spezifikation definiert.

Beispiele

In diesem Beispiel werden wir einen etwas fortgeschritteneren Datei-Auswahl-Dialog vorstellen, der die in der HTMLInputElement.files-Eigenschaft verfgbaren Dateiinformationen nutzt und einige clevere Tricks vorfhrt.

Zuerst lassen Sie uns das HTML ansehen:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
    <input
      type="file"
      id="image_uploads"
      name="image_uploads"
      accept=".jpg, .jpeg, .png"
      multiple />
  </div>
  <div class="preview">
    <p>No files currently selected for upload</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

html {
  font-family: sans-serif;
}

form {
  background: #cccccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eeeeee;
  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 hnelt dem, was wir zuvor gesehen haben nichts Besonderes zu erwhnen.

Als nchstes gehen wir durch das JavaScript.

In den ersten Skriptzeilen erhalten wir Referenzen zum Formulareingabefeld selbst und zum <div>-Element mit der Klasse .preview. Als nchstes verbergen wir das <input>-Element wir tun dies, weil Datei-Eingaben dazu neigen, hsslich, schwer zu stylen und inkonsistent im Design ber Browser hinweg zu sein. Sie knnen das input-Element aktivieren, indem Sie auf sein <label> klicken, daher ist es besser, das input visuell zu verstecken und das Label wie eine Schaltflche zu stylen, damit der Benutzer wei, dass er es anklicken soll, wenn er Dateien hochladen mchte.

const input = document.querySelector("input");
const preview = document.querySelector(".preview");

input.style.opacity = 0;

Als nchstes fgen wir einen Ereignis-Listener zur Eingabe hinzu, um auf nderungen ihrer ausgewhlten Werte zu hren (in diesem Fall, wenn Dateien ausgewhlt werden). Der Ereignis-Listener ruft unsere benutzerdefinierte updateImageDisplay()-Funktion auf.

input.addEventListener("change", updateImageDisplay);

Wann immer die updateImageDisplay()-Funktion aufgerufen wird, tun wir Folgendes:

• Verwenden Sie eine while-Schleife, um den vorherigen Inhalt des Vorschau-<div> zu leeren.

• Holen Sie das FileList-Objekt, das die Informationen zu allen ausgewhlten Dateien enthlt, und speichern Sie es in einer Variablen namens curFiles.

• berprfen Sie, ob keine Dateien ausgewhlt wurden, indem Sie berprfen, ob curFiles.length gleich 0 ist. Wenn ja, drucken Sie eine Nachricht in das Vorschau-<div>, dass keine Dateien ausgewhlt wurden.

• Wenn Dateien ausgewhlt wurden, durchlaufen wir jede einzelne und drucken Informationen darber in das Vorschau-<div>. Zu beachtende Punkte sind:

• Wir verwenden die benutzerdefinierte validFileType()-Funktion, um zu berprfen, ob die Datei vom korrekten Typ ist (z.B. die Bildtypen, die im accept-Attribut spezifiziert sind).

• Falls ja, dann:

  • Drucken wir den Namen und die Dateigre in einem Listenelement innerhalb des vorherigen <div> aus (erhalten von file.name und file.size). Die benutzerdefinierte returnFileSize()-Funktion gibt eine schn formatierte Version der Gre in Bytes/KB/MB zurck (standardmig gibt der Browser die Gre in absoluten Bytes an).
  • Erstellen Sie eine Miniaturansicht des Bildes, indem URL.createObjectURL(file) aufgerufen wird. Fgen Sie dann das Bild ebenfalls in das Listenelement ein, indem eine neue <img> erstellt und ihr src auf die Miniaturansicht gesetzt wird.

• Wenn der Dateityp ungltig ist, wird eine Nachricht in einem Listenelement angezeigt, die den Benutzer darber informiert, dass er einen anderen Dateityp auswhlen muss.

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 berprfen, ob ein Wert in fileTypes dem type-Eigenschaft der Datei entspricht. Wenn ein bereinstimmung gefunden wird, gibt die Funktion true zurck. Wenn keine bereinstimmung gefunden wird, gibt sie false zurck.

// 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 (von Bytes, entnommen aus der aktuellen size-Eigenschaft der Datei) und wandelt sie in eine schn formatierte Gre in Bytes/KB/MB um.

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`;
}

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

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Verwendung von Dateien aus Webanwendungen enthlt eine Reihe weiterer ntzlicher Beispiele im Zusammenhang mit <input type="file"> und der File API.