Datei-Eingabe ‚annehmen‘ Attribut - ist es sinnvoll?
-
05-07-2019 - |
Frage
Implementierung ein Datei-Upload unter html ist ziemlich einfach, aber ich habe gerade bemerkt, dass es ein ‚annehmen‘ Attribut, das auf den <input type="file" ...>
Tag hinzugefügt werden kann.
Ist das Attribut nützlich als eine Möglichkeit, Datei-Uploads, um Bilder zu begrenzen, etc? Was ist der beste Weg, es zu benutzen?
Alternativ ist es eine Möglichkeit, Dateitypen zu begrenzen, vorzugsweise im Datei-Dialog, für einen HTML-Datei input-Tag?
Lösung
Das accept
Attribut ist unglaublich nützlich. Es ist ein Hinweis auf Browser nur Dateien anzuzeigen, die für den aktuellen input
erlaubt sind. Während es in der Regel von den Benutzern außer Kraft gesetzt werden kann, hilft es, die Ergebnisse für die Benutzer standardmäßig einzuengen, so dass sie genau das bekommen, was sie suchen, ohne über hundert verschiedene Dateitypen sichten zu müssen.
Verwendung
Hinweis: wurden geschrieben Diese Beispiele basieren auf der aktuellen Spezifikation und kann nicht wirklich funktionieren in allen (oder überhaupt) Browser. Die Spezifikation kann auch in Zukunft nichts ändern, was diese Beispiele brechen 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>
Von der HTML-Spezifikation ( Quelle )
Das
accept
Attribut kann angegeben werden Benutzeragenten mit einem zu schaffen, Hinweis darauf, was Dateitypen akzeptiert werden.Wenn angegeben, muss das Attribut eines bestehen Set von kommagetrennten Tokens , von denen jedes ein sein muß ASCII Groß- und Kleinschreibung Spiel für eine der folgenden Möglichkeiten:
Die Zeichenfolge
audio/*
- Zeigt an, dass Sound-Dateien akzeptiert.
Die Zeichenfolge
video/*
- Zeigt an, dass Video-Dateien akzeptiert.
Die Zeichenfolge
image/*
- Zeigt an, dass Bilddateien akzeptiert.
A gültige MIME-Typ ohne Parameter
- Zeigt an, dass Dateien des angegebenen Typs akzeptiert werden.
Eine Zeichenkette, deren erste Zeichen ein U + 002E FULL Endzeichen (.)
- Zeigt an, dass Dateien mit der angegebenen Dateierweiterung akzeptiert werden.
Andere Tipps
Ja, es ist extrem in Browsern nützlich, die es unterstützen, aber die „Begrenzung“ ist als Service für Benutzer (so dass sie nicht überwältigt mit irrelevanten Dateien) und nicht als Weg, um sie zu verhindern, dass Dinge hochladen Sie don‘ t wollen, dass sie hochgeladen werden.
Es wird unterstützt in
- Chrome 16 +
- Safari 6 +
- Firefox 9 +
- IE 10 +
- Opera 11 +
Hier ist können verwenden, um mit ihm, durch die entsprechenden Dateiendungen gefolgt (obwohl man natürlich jede Dateierweiterung verwenden können):
application/envoy evy
application/fractals fif
application/futuresplash spl
application/hta hta
application/internet-property-stream acx
application/mac-binhex40 hqx
application/msword doc
application/msword dot
application/octet-stream *
application/octet-stream bin
application/octet-stream class
application/octet-stream dms
application/octet-stream exe
application/octet-stream lha
application/octet-stream lzh
application/oda oda
application/olescript axs
application/pdf pdf
application/pics-rules prf
application/pkcs10 p10
application/pkix-crl crl
application/postscript ai
application/postscript eps
application/postscript ps
application/rtf rtf
application/set-payment-initiation setpay
application/set-registration-initiation setreg
application/vnd.ms-excel xla
application/vnd.ms-excel xlc
application/vnd.ms-excel xlm
application/vnd.ms-excel xls
application/vnd.ms-excel xlt
application/vnd.ms-excel xlw
application/vnd.ms-outlook msg
application/vnd.ms-pkicertstore sst
application/vnd.ms-pkiseccat cat
application/vnd.ms-pkistl stl
application/vnd.ms-powerpoint pot
application/vnd.ms-powerpoint pps
application/vnd.ms-powerpoint ppt
application/vnd.ms-project mpp
application/vnd.ms-works wcm
application/vnd.ms-works wdb
application/vnd.ms-works wks
application/vnd.ms-works wps
application/winhlp hlp
application/x-bcpio bcpio
application/x-cdf cdf
application/x-compress z
application/x-compressed tgz
application/x-cpio cpio
application/x-csh csh
application/x-director dcr
application/x-director dir
application/x-director dxr
application/x-dvi dvi
application/x-gtar gtar
application/x-gzip gz
application/x-hdf hdf
application/x-internet-signup ins
application/x-internet-signup isp
application/x-iphone iii
application/x-javascript js
application/x-latex latex
application/x-msaccess mdb
application/x-mscardfile crd
application/x-msclip clp
application/x-msdownload dll
application/x-msmediaview m13
application/x-msmediaview m14
application/x-msmediaview mvb
application/x-msmetafile wmf
application/x-msmoney mny
application/x-mspublisher pub
application/x-msschedule scd
application/x-msterminal trm
application/x-mswrite wri
application/x-netcdf cdf
application/x-netcdf nc
application/x-perfmon pma
application/x-perfmon pmc
application/x-perfmon pml
application/x-perfmon pmr
application/x-perfmon pmw
application/x-pkcs12 p12
application/x-pkcs12 pfx
application/x-pkcs7-certificates p7b
application/x-pkcs7-certificates spc
application/x-pkcs7-certreqresp p7r
application/x-pkcs7-mime p7c
application/x-pkcs7-mime p7m
application/x-pkcs7-signature p7s
application/x-sh sh
application/x-shar shar
application/x-shockwave-flash swf
application/x-stuffit sit
application/x-sv4cpio sv4cpio
application/x-sv4crc sv4crc
application/x-tar tar
application/x-tcl tcl
application/x-tex tex
application/x-texinfo texi
application/x-texinfo texinfo
application/x-troff roff
application/x-troff t
application/x-troff tr
application/x-troff-man man
application/x-troff-me me
application/x-troff-ms ms
application/x-ustar ustar
application/x-wais-source src
application/x-x509-ca-cert cer
application/x-x509-ca-cert crt
application/x-x509-ca-cert der
application/ynd.ms-pkipko pko
application/zip zip
audio/basic au
audio/basic snd
audio/mid mid
audio/mid rmi
audio/mpeg mp3
audio/x-aiff aif
audio/x-aiff aifc
audio/x-aiff aiff
audio/x-mpegurl m3u
audio/x-pn-realaudio ra
audio/x-pn-realaudio ram
audio/x-wav wav
image/bmp bmp
image/cis-cod cod
image/gif gif
image/ief ief
image/jpeg jpe
image/jpeg jpeg
image/jpeg jpg
image/pipeg jfif
image/svg+xml svg
image/tiff tif
image/tiff tiff
image/x-cmu-raster ras
image/x-cmx cmx
image/x-icon ico
image/x-portable-anymap pnm
image/x-portable-bitmap pbm
image/x-portable-graymap pgm
image/x-portable-pixmap ppm
image/x-rgb rgb
image/x-xbitmap xbm
image/x-xpixmap xpm
image/x-xwindowdump xwd
message/rfc822 mht
message/rfc822 mhtml
message/rfc822 nws
text/css css
text/h323 323
text/html htm
text/html html
text/html stm
text/iuls uls
text/plain bas
text/plain c
text/plain h
text/plain txt
text/richtext rtx
text/scriptlet sct
text/tab-separated-values tsv
text/webviewhtml htt
text/x-component htc
text/x-setext etx
text/x-vcard vcf
video/mpeg mp2
video/mpeg mpa
video/mpeg mpe
video/mpeg mpeg
video/mpeg mpg
video/mpeg mpv2
video/quicktime mov
video/quicktime qt
video/x-la-asf lsf
video/x-la-asf lsx
video/x-ms-asf asf
video/x-ms-asf asr
video/x-ms-asf asx
video/x-msvideo avi
video/x-sgi-movie movie
x-world/x-vrml flr
x-world/x-vrml vrml
x-world/x-vrml wrl
x-world/x-vrml wrz
x-world/x-vrml xaf
x-world/x-vrml xof
Akzeptieren Attribut wurde in der RFC 1867 rel="nofollow, die beabsichtigen, Dateityp-Filterung basiert zu ermöglichen auf MIME-Typ für die Datei-Auswahlsteuerung. Aber ab 2008, die meisten, wenn nicht alle, machen Browser keine Verwendung dieses Attributs. Mit Client-seitiges Scripting, können Sie eine Art Erweiterung basierte Validierung machen, für die Daten vorzulegen korrekten Typs (Erweiterung).
Andere Lösungen für die erweiterte Datei-Upload benötigen Flash-Filme wie SWFUpload oder Java-Applets wie JUpload .
Im Jahr 2015 der einzige Weg, Ich fand es für beide funktioniert Chrome und Firefox ist, alle möglichen Erweiterungen setzen Sie unterstützen möchten, , einschließlich Varianten:
accept=".jpeg, .jpg, .jpe, .jfif, .jif"
Problem mit FireFox : Mit dem image/jpeg
MIME-Typ FireFox nur .jpg
Dateien zeigen, sehr seltsam, als ob der gemeinsame .jpeg
nicht in Ordnung war ...
Was auch immer Sie tun, sollten Sie mit Dateien, die viele verschiedene Erweiterungen versuchen. Vielleicht hängt es auch von den OS ...
Ich nehme an accept
Fall unempfindlich ist, aber vielleicht nicht in jedem Browser.
Hier ist der MDN docs zu akzeptieren :
akzeptieren Wenn der Wert des type-Attribut ist Datei, dann wird dieses Attribut die Dateitypen angeben, die der Server akzeptiert, es anders werden ignoriert. Der Wert muss eine durch Kommata getrennte Liste von eindeutig sein Inhalt Typdeklarierer:
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
Es wird von Chrome unterstützt. Es soll nicht für die Validierung verwendet werden, aber für Typ Hinting das OS. Wenn Sie ein accept="image/jpeg"
Attribut in einer Datei, die die OS laden nur Dateien der vorgeschlagenen Art zeigen kann.
Es ist schon ein paar Jahre, und Chrome mindestens nutzt dieses Attribut. Dieses Attribut ist sehr nützlich, aus Usability-Sicht, da sie die nicht benötigten Dateien für den Benutzer herausfiltert, was ihre Erfahrung glatter. Allerdings kann der Benutzer immer noch wählen Sie „Alle Dateien“ aus dem Typ (oder auf andere Weise umgeht die Filter), so sollten Sie immer die Datei validieren, wo es tatsächlich verwendet wird; Wenn Sie es auf dem Server verwenden sind, bestätigen Sie es, bevor es zu benutzen. Der Benutzer kann immer umgehen jeden Client-seitiges Scripting.
Wenn der Browser dieses Attribut verwendet, ist es nur als Hilfe für den Benutzer, so wird er nicht eine Multi-Megabyte-Datei lädt nur sie vom Server zurückgewiesen zu sehen ...
Das Gleiche gilt für den <input type="hidden" name="MAX_FILE_SIZE" value="100000">
tag:., Wenn der Browser nutzt, wird es nicht die Datei senden, aber einen Fehler, was zu UPLOAD_ERR_FORM_SIZE
(2) Fehler in PHP (nicht sicher, wie es in anderen Sprachen gehandhabt wird)
Beachten Sie diese trägt dazu bei, die Benutzer . Natürlich muss der Server die Art und Größe der Datei auf seinem Ende immer überprüfen. Es ist leicht, mit diesen Werten auf der Clientseite zu manipulieren
Im Jahr 2008 war dies nicht wichtig, weil der Mangel an mobilen OS'es aber jetzt ganz wichtige Sache.
Wenn Sie akzeptierten MIME-Typen gesetzt, dann in zum Beispiel Android User-System Dialog mit Anwendungen gegeben, die ihm den Inhalt der Mime bereitstellen kann, die Datei Input akzeptiert, was groß ist, weil auf mobilen Geräten durch die Dateien in Datei-Explorer die Navigation langsam und oft stressig.
Eine wichtige Sache ist, dass einige Handy-Browser (basiert auf dem Android-Version von Chrome 36 und Chrome Beta 37) unterstützt keine App Filterung über Erweiterung (en) und mehrere MIME-Typen.