HTML Attribut: accept

Die accept-Eigenschaft ist ein Attribut des file-Typs von <input>. Es wurde auf dem <form>-Element unterstützt, aber zugunsten von file entfernt.

Da ein bestimmter Dateityp auf mehr als eine Weise identifiziert werden kann, ist es nützlich, eine umfassende Reihe von Typspezifizierern bereitzustellen, wenn Sie Dateien eines bestimmten Typs benötigen, oder das Wildcard-Zeichen zu verwenden, um anzugeben, dass ein Typ jeglichen Formats akzeptabel ist.

Zum Beispiel gibt es mehrere Möglichkeiten, Microsoft Word-Dateien zu identifizieren, also könnte eine Seite, die Word-Dateien akzeptiert, ein <input> wie dieses verwenden:

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

Wenn Sie hingegen eine Mediendatei akzeptieren, möchten Sie möglicherweise jedes Format dieses Medientyps einschließen:

<input type="file" id="soundFile" accept="audio/*" />
<input type="file" id="videoFile" accept="video/*" />
<input type="file" id="imageFile" accept="image/*" />

Das accept-Attribut validiert die Typen der ausgewählten Dateien nicht; es bietet Hinweise für Browser, um Benutzer dahin zu führen, die richtigen Dateitypen auszuwählen. Es ist dennoch möglich (in den meisten Fällen), dass Benutzer eine Option im Datei-Dialog umschalten, die ihnen erlaubt, dies zu überschreiben und beliebige Dateien auszuwählen, auch solche mit falschen Dateitypen.

Aus diesem Grund sollten Sie sicherstellen, dass die erwarteten Anforderungen serverseitig validiert werden.

Wenn es auf einem Datei-Eingabetyp gesetzt ist, sollte der native Dateiauswahldialog nur das Auswählen von Dateien des richtigen Dateityps ermöglichen. Die meisten Betriebssysteme verblassen die Dateien, die nicht den Kriterien entsprechen und nicht auswählbar sind.

<p>
  <label for="soundFile">Select an audio file:</label>
  <input type="file" id="soundFile" accept="audio/*" />
</p>
<p>
  <label for="videoFile">Select a video file:</label>
  <input type="file" id="videoFile" accept="video/*" />
</p>
<p>
  <label for="imageFile">Select some images:</label>
  <input type="file" id="imageFile" accept="image/*" multiple />
</p>

Beachten Sie, dass das letzte Beispiel Ihnen erlaubt, mehrere Bilder auszuwählen. Weitere Informationen finden Sie im multiple-Attribut.

Ein unique file type specifier ist ein String, der eine Art von Datei beschreibt, die vom Benutzer in einem <input>-Element des Typs file ausgewählt werden kann. Jeder unique file type specifier kann eine der folgenden Formen annehmen:

• Eine gültige, nicht groß-/kleinschreibungssensitive Dateierweiterung, beginnend mit einem Punkt (".") Zeichen. Zum Beispiel: .jpg, .pdf oder .doc.
• Ein gültiger MIME-Type-String, ohne Erweiterungen.
• Der String audio/*, der "jede Audiodatei" bedeutet.
• Der String video/*, der "jede Videodatei" bedeutet.
• Der String image/*, der "jede Bilddatei" bedeutet.

Das accept-Attribut nimmt als Wert einen String mit einem oder mehreren dieser unique file type specifiers an, getrennt durch Kommas. Beispielsweise könnte ein Datei-Auswahldialog, der Inhalte benötigt, die als Bild präsentiert werden können, einschließlich sowohl Standardbildformate als auch PDF-Dateien, so aussehen:

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

<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:

Unabhängig vom Gerät oder Betriebssystem des Benutzers bietet das Datei-Eingabefeld eine Schaltfläche, die einen Datei-Auswahldialog öffnet, der es dem Benutzer ermöglicht, eine Datei auszuwählen.

Das Einschließen des multiple-Attributs, wie oben gezeigt, gibt an, dass mehrere Dateien gleichzeitig ausgewählt werden können. Der Benutzer kann auf jede Weise mehrere Dateien aus dem Datei-Dialog auswählen, die seine gewählte Plattform erlaubt (z. B. durch Drücken der Shift- oder Control-Taste und anschließendes Klicken). Wenn Sie möchten, dass der Benutzer nur eine einzelne Datei pro <input> auswählt, lassen Sie das multiple-Attribut weg.

Häufig möchten Sie nicht, dass der Benutzer beliebige Dateitypen auswählen kann; stattdessen möchten Sie häufig, dass er Dateien eines bestimmten Typs oder einer bestimmten Typen auswählt. Zum Beispiel, wenn Ihre Datei-Eingabe es den Benutzern erlaubt, ein Profilbild hochzuladen, möchten Sie wahrscheinlich, dass sie web-kompatible Bildformate wie JPEG oder PNG auswählen.

Akzeptable Dateitypen können mit dem accept-Attribut angegeben 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 mobile Geräte ermöglichen es dem Benutzer auch, ein Bild mit der Kamera aufzunehmen, wenn dies verwendet wird.)
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — akzeptiert alles, was wie ein MS Word-Dokument aussieht.

Schauen wir uns ein vollständigeren 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;
}

• Verwendung von Dateien aus Webanwendungen
• File API