Datei-Eingabe-Attribut "accept" - ist es nützlich?

Question

Die Implementierung eines Datei-Uploads unter html ist ziemlich einfach, aber ich habe gerade bemerkt, dass es ein "accept"-Attribut gibt, das zu der <input type="file" ...> Tag.

Ist dieses Attribut nützlich, um das Hochladen von Dateien auf Bilder usw. zu beschränken? Wie ist es am besten zu verwenden?

Oder gibt es eine Möglichkeit, Dateitypen zu begrenzen, vorzugsweise im Dateidialog, für ein html-Dateieingabe-Tag?

Answer 1

Les accept Attribut ist unglaublich nützlich. Es ist ein Hinweis an die Browser, nur Dateien anzuzeigen, die für den aktuellen input . Sie kann zwar in der Regel von den Nutzern außer Kraft gesetzt werden, trägt aber dazu bei, die Ergebnisse für die Nutzer einzugrenzen, so dass sie genau das bekommen, was sie suchen, ohne sich durch hundert verschiedene Dateitypen wühlen zu müssen.

Verwendung

Anmerkung: Diese Beispiele wurden auf der Grundlage der aktuellen Spezifikation geschrieben und funktionieren möglicherweise nicht in allen (oder allen) Browsern. Die Spezifikation kann sich auch in Zukunft ändern, was diese Beispiele zunichte machen könnte.

h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }

<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>

<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>

<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>

<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>

<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

Aus der HTML-Spezifikation ( Quelle )

Les accept Attribut kann angegeben werden, um Benutzer-Agenten mit einem Hinweis zu geben, welche Dateitypen akzeptiert werden.

Falls angegeben, wird das Attribut Satz von durch Komma getrennten Token , e ASCII Groß- und Kleinschreibung nicht beachten eine Übereinstimmung mit einem der folgenden Punkte:

Die Zeichenfolge audio/*

• Zeigt an, dass Tondateien akzeptiert werden.

Die Zeichenfolge video/*

• Zeigt an, dass Videodateien akzeptiert werden.

Die Zeichenfolge image/*

• Zeigt an, dass Bilddateien akzeptiert werden.

A gültiger MIME-Typ ohne Parameter

• Zeigt an, dass Dateien des angegebenen Typs akzeptiert werden.

Eine Zeichenkette, deren erstes Zeichen ein U+002E FULL STOP Zeichen (.) ist

• Gibt an, dass Dateien mit der angegebenen Dateierweiterung akzeptiert werden.

Answer 2

Im Jahr 2015 der einzige Weg Ich habe herausgefunden, dass es für beide funktioniert Chrom y Firefox ist es, alle möglichen Erweiterungen anzugeben, die Sie unterstützen wollen, einschließlich der Varianten (einschließlich des Punktes vor !):

accept=".jpeg, .jpg, .jpe, .jfif, .jif"

Problem mit Firefox : Die Verwendung des image/jpeg mime type zeigt Firefox nur .jpg Dateien, sehr seltsam, als ob die gemeinsame .jpeg war nicht in Ordnung...

Was auch immer Sie tun, versuchen Sie es mit Dateien mit verschiedenen Erweiterungen. Vielleicht hängt es sogar vom Betriebssystem ab ... nehme ich an. accept ist unabhängig von der Groß- und Kleinschreibung, aber vielleicht nicht in jedem Browser.

Hier ist die MDN-Dokumente über accept :

akzeptieren Wenn der Wert des Attributs type file ist, gibt dieses Attribut die Dateitypen an, die der Server akzeptiert, andernfalls wird es ignoriert werden. Der Wert muss eine durch Komma getrennte Liste von eindeutigen Inhaltstyp-Bezeichnern sein:

    A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).
    A valid MIME type with no extensions.
    audio/* representing sound files. HTML5
    video/* representing video files. HTML5
    image/* representing image files. HTML5

Answer 3

Das Attribut Accept wurde in der RFC 1867 mit der Absicht, die Filterung nach MIME-Typ für die Dateiauswahlsteuerung zu ermöglichen. Doch seit 2008 verwenden die meisten, wenn nicht sogar alle Browser dieses Attribut nicht mehr. Mithilfe von clientseitigem Scripting können Sie eine Art erweiterungsbasierte Validierung durchführen, um Daten des richtigen Typs (Erweiterung) zu übermitteln.

Andere Lösungen für das erweiterte Hochladen von Dateien erfordern Flash-Filme wie SWFUpload oder Java-Applets wie JUpload .

Answer 4

Sie wird von Chrome unterstützt. Es soll nicht für die Validierung verwendet werden, sondern für Typ-Hinweise des Betriebssystems. Wenn Sie eine accept="image/jpeg" Attribut in einem Datei-Upload kann das Betriebssystem nur Dateien des vorgeschlagenen Typs anzeigen.

Answer 5

Es ist schon ein paar Jahre her, und Chrome macht zumindest Gebrauch von diesem Attribut. Dieses Attribut ist unter dem Gesichtspunkt der Benutzerfreundlichkeit sehr nützlich, da es für den Benutzer unnötige Dateien herausfiltert und so die Benutzererfahrung verbessert. Der Benutzer kann jedoch immer noch "alle Dateien" aus dem Typ auswählen (oder den Filter anderweitig umgehen), daher sollten Sie die Datei immer dort validieren, wo sie tatsächlich verwendet wird; wenn Sie sie auf dem Server verwenden, validieren Sie sie dort, bevor Sie sie verwenden. Der Benutzer kann immer jedes clientseitige Scripting umgehen.