Dasaccept-Attribut nimmt als Wert eine kommagetrennte Liste von einem oder mehreren Dateitypen odereindeutigen Dateitypspezifizierern an, die beschreiben, welche Dateitypen erlaubt sind.

Probieren Sie es aus

<label for="movie">Choose a movie to upload:</label><input type="file" name="movie" accept="video/*" /><label for="poster">Choose a poster:</label><input type="file" name="poster" accept="image/png, image/jpeg" />

label {  display: block;  margin-top: 1rem;}input {  margin-bottom: 1rem;}

Überblick

Die accept-Eigenschaft ist ein Attribut desfile-Typs im<input>-Element. Es wurde im<form>-Element unterstützt, aber zugunsten vonfile entfernt.

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

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

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

Wohingegen, wenn Sie eine Mediendatei akzeptieren, Sie möglicherweise jedes Format dieses Medientyps einbeziehen möchten:

<input type="file" accept="audio/*" /><input type="file" accept="video/*" /><input type="file" accept="image/*" />

Dasaccept-Attribut validiert nicht die Typen der ausgewählten Dateien; es gibt Browsern Hinweise, um Benutzer bei der Auswahl der richtigen Dateitypen zu unterstützen. Es ist in den meisten Fällen immer noch möglich, dass Benutzer eine Option im Dateiauswahldialog aktivieren, die es ermöglicht, dies zu überschreiben und jede beliebige Datei auszuwählen, die sie wünschen, und dann falsche Dateitypen auszuwählen.

Aus diesem Grund sollten Sie sicherstellen, dass die erwartete Anforderung serverseitig validiert wird.

Beispiele

Wenn beim Datei-Input-Typ gesetzt, sollte der native Datei-Dialog, der sich öffnet, es nur ermöglichen, Dateien des richtigen Dateityps auszuwählen. Die meisten Betriebssysteme machen Dateien, die nicht den Kriterien entsprechen, heller und nicht auswählbar.

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

Beachten Sie, dass das letzte Beispiel es Ihnen ermöglicht, mehrere Bilder auszuwählen. Siehe dasmultiple-Attribut für weitere Informationen.

Eindeutige Dateitypspezifizierer

Eineindeutiger Dateitypspezifizierer ist ein String, der eine Art von Datei beschreibt, die von einem Benutzer im<input>-Element des Typsfile ausgewählt werden kann. Jeder eindeutige Dateitypspezifizierer kann eine der folgenden Formen annehmen:

• Eine gültige, nicht case-sensitive Dateierweiterung, die mit einem Punkt (".") beginnt. Zum Beispiel:.jpg,.pdf oder.doc.
• Ein gültiger MIME-Typ-String, ohne Erweiterungen.
• Der Stringaudio/*, der "jede Audiodatei" bedeutet.
• Der Stringvideo/*, der "jede Videodatei" bedeutet.
• Der Stringimage/*, der "jede Bilddatei" bedeutet.

Dasaccept-Attribut nimmt als Wert einen String, der einen oder mehrere dieser eindeutigen Dateitypspezifizierer enthält, getrennt durch Kommas. Zum Beispiel könnte ein Dateiauswahldialog, der Inhalte benötigt, die als Bild dargestellt werden können, einschließlich sowohl Standardbildformate als auch PDF-Dateien, so aussehen:

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

Verwenden von Dateieingaben

Ein einfaches Beispiel

<form method="post" enctype="multipart/form-data">  <div>    <label for="file">Choose file to upload</label>    <input type="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 die Dateieingabe eine Schaltfläche, die einen Dateiauswahldialog öffnet, der es dem Benutzer ermöglicht, eine Datei auszuwählen.

Wenn dasmultiple-Attribut einbezogen wird, wie oben gezeigt, gibt es an, dass mehrere Dateien auf einmal ausgewählt werden können. Der Benutzer kann mehrere Dateien aus dem Dateiwähler auf jede Art und Weise auswählen, die seine gewählte Plattform erlaubt (z.B. durch das Gedrückthalten vonShift oderControl und dann Anklicken). Wenn Sie möchten, dass der Benutzer nur eine einzelne Datei pro<input> auswählen kann, lassen Sie dasmultiple-Attribut weg.

Begrenzen der akzeptierten Dateitypen

Oft möchten Sie nicht, dass der Benutzer jede beliebige Art von Datei auswählen kann; stattdessen möchten Sie oft, dass er Dateien eines bestimmten Typs oder bestimmter Typen auswählt. Zum Beispiel, wenn Ihre Dateieingabe es Benutzern ermöglicht, ein Profilbild hochzuladen, möchten Sie wahrscheinlich, dass sie webkompatible Bildformate auswählen, wieJPEG oderPNG.

Akzeptable Dateitypen können mit demaccept-Attribut angegeben werden, das eine kommagetrennte Liste von erlaubten Dateierweiterungen oder MIME-Typen annimmt. Einige Beispiele:

• accept="image/png" oderaccept=".png" — Akzeptiert PNG-Dateien.
• accept="image/png, image/jpeg" oderaccept=".png, .jpg, .jpeg" — Akzeptiert PNG- oder JPEG-Dateien.
• accept="image/*" — Akzeptiert jede Datei mit einemimage/* MIME-Typ. (Viele mobile Geräte 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 wie ein MS Word-Dokument aussieht.

Sehen wir uns ein vollständigeres Beispiel an:

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

div {  margin-bottom: 10px;}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwenden von Dateien aus Webanwendungen
• File API