Das Implementieren eines Datei-Uploads unter HTML ist ziemlich einfach, aber ich habe gerade bemerkt, dass es ein 'accept'-Attribut gibt, das dem <input type="file" ...>Tag hinzugefügt werden kann .
Ist dieses Attribut nützlich, um das Hochladen von Dateien auf Bilder usw. zu beschränken? Was ist der beste Weg, um es zu verwenden?
Gibt es alternativ eine Möglichkeit, Dateitypen, vorzugsweise im Dateidialog, für ein HTML-Dateieingabetag einzuschränken?
html
filter
cross-browser
mime-types
Darren Oster
quelle
quelle
input type="file"zu überprüfen , ob nuraccepted-Dateitypen ausgewählt werden können.Antworten:
Das
acceptAttribut ist unglaublich nützlich. Es ist ein Hinweis für Browser, nur Dateien anzuzeigen, die für den aktuellen zulässig sindinput. Während es normalerweise von Benutzern überschrieben werden kann, hilft es dabei, die Ergebnisse für Benutzer standardmäßig einzugrenzen, sodass sie genau das bekommen, wonach sie suchen, ohne hundert verschiedene Dateitypen durchsuchen zu müssen.Verwendungszweck
Hinweis: Diese Beispiele wurden basierend auf der aktuellen Spezifikation geschrieben und funktionieren möglicherweise nicht in allen (oder einigen) Browsern. Die Spezifikation kann sich auch in Zukunft ändern, was diese Beispiele brechen könnte.
Aus der HTML-Spezifikation ( Quelle )
quelle
accept='.jpg,.png,.gif,.pdf,.eps'erlaubte aber keine Auswahl. Ich habe viele Variationen ausprobiert - durch Leerzeichen getrennt, keine Punktzeichen usw., aber keine Würfel in Chrome v20, also habe ich die MIME-Typen verwendet und es hat großartig funktioniert:accept='image/jpeg,image/gif,image/png,application/pdf,image/x-eps'image/*. Schade.Value: A set of comma-separated strings, each of which is a valid MIME type, with no parameters.Nur Pantomimentypen. Keine Erweiterungen. Es ist Sache des Kunden, den MIME-Typ zu bestimmen.A string whose first character is a U+002E FULL STOP character (.) -- Indicates that files with the specified file extension are accepted.video/*bedeutet, dass Sie mp4 nicht in Safari hochladen können, müssen Sie auch angebenvideo/mp4Ja, es ist äußerst nützlich in Browsern, die es unterstützen, aber die "Einschränkung" dient eher der Benutzerfreundlichkeit (damit sie nicht mit irrelevanten Dateien überfordert sind) als der Verhinderung, dass sie Dinge hochladen, die Sie nicht möchten Hochladen.
Es wird unterstützt in
Hier ist eine Liste der Inhaltstypen, die Sie damit verwenden können, gefolgt von den entsprechenden Dateierweiterungen (obwohl Sie natürlich jede Dateierweiterung verwenden können):
quelle
accept=".ttf"funktioniert wie erwartet.Im Jahr 2015 der einzige Weg , fand ich es für beide arbeiten machen Chrome und Firefox ist , alle möglichen Erweiterungen setzen Sie unterstützen möchten, einschließlich Varianten:
Problem mit Firefox : Bei Verwendung des
image/jpegMIME-Typs zeigt Firefox nur.jpgDateien an, sehr seltsam, als ob das Common.jpegnicht in Ordnung wäre ...Was auch immer Sie tun, versuchen Sie es mit Dateien mit vielen verschiedenen Erweiterungen. Vielleicht hängt es sogar vom Betriebssystem ab ... Ich nehme an, es
acceptwird nicht zwischen Groß- und Kleinschreibung unterschieden, aber vielleicht nicht in jedem Browser.Hier sind die MDN-Dokumente zum Akzeptieren :
quelle
Das Attribut Accept wurde im RFC 1867 eingeführt , um die Dateitypfilterung basierend auf dem MIME-Typ für das Dateiauswahlsteuerelement zu aktivieren. Ab 2008 verwenden die meisten, wenn nicht 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 senden.
Andere Lösungen für das erweiterte Hochladen von Dateien erfordern Flash-Filme wie SWFUpload oder Java-Applets wie JUpload .
quelle
Es wird von Chrome unterstützt. Es soll nicht zur Validierung verwendet werden, sondern zur Eingabe des Betriebssystems. Wenn Sie ein
accept="image/jpeg"Attribut in einem Datei-Upload haben, kann das Betriebssystem nur Dateien des vorgeschlagenen Typs anzeigen.quelle
accept="image/*"unter Firefox, Chrome und Opera funktioniert.accept="text/plain"stattdessen.Es ist einige Jahre her und Chrome nutzt zumindest dieses Attribut. Dieses Attribut ist unter dem Gesichtspunkt der Benutzerfreundlichkeit sehr nützlich, da es die unnötigen Dateien für den Benutzer herausfiltert und dessen Erfahrung reibungsloser macht. Der Benutzer kann jedoch weiterhin "alle Dateien" aus dem Typ auswählen (oder den Filter auf andere Weise umgehen). Daher sollten Sie die Datei immer dort überprüfen, wo sie tatsächlich verwendet wird. Wenn Sie es auf dem Server verwenden, überprüfen Sie es dort, bevor Sie es verwenden. Der Benutzer kann jedes clientseitige Skript jederzeit umgehen.
quelle
Wenn der Browser dieses Attribut verwendet, dient es nur als Hilfe für den Benutzer, sodass er keine Multi-Megabyte-Datei hochlädt, nur um zu sehen, dass sie vom Server abgelehnt wird.
Gleiches gilt für das
<input type="hidden" name="MAX_FILE_SIZE" value="100000">Tag: Wenn der Browser es verwendet, Die Datei wird nicht gesendet, es tritt jedoch ein Fehler auf, der zuUPLOAD_ERR_FORM_SIZE(2) PHP-Fehlern führt (nicht sicher, wie in anderen Sprachen damit umgegangen wird).Beachten Sie, dass dies Hilfen für den Benutzer sind . Natürlich muss der Server immer den Typ und die Größe der Datei am Ende überprüfen: Es ist einfach, diese Werte auf der Clientseite zu manipulieren.
quelle
Im Jahr 2008 war dies wegen des Mangels an mobilen Betriebssystemen nicht wichtig, aber jetzt ziemlich wichtig.
Wenn Sie akzeptierte MIME-Typen festlegen, wird beispielsweise dem Android-Benutzer ein Systemdialog mit Apps angezeigt, die ihm den Inhalt der MIME liefern können, den die Dateieingabe akzeptiert. Dies ist großartig, da das Navigieren durch Dateien im Datei-Explorer auf Mobilgeräten langsam und häufig stressig ist .
Eine wichtige Sache ist, dass einige mobile Browser (basierend auf der Android-Version von Chrome 36 und Chrome Beta 37) keine App-Filterung über Erweiterungen und mehrere MIME-Typen unterstützen.
quelle