File input 'accept' attribute - is it useful?
Implementing a file upload under html is fairly simple, but I just noticed that there is an \'accept\' attribute that can be added to the
-
In 2015 the only way I found to make it work for both Chrome and Firefox is to put all possible extensions you want to support, including variants (including the dot in front !):
accept=".jpeg, .jpg, .jpe, .jfif, .jif"Problem with Firefox: Using the
image/jpegmime type Firefox will only show.jpgfiles, very strange as if the common.jpegwas not ok...Whatever you do, be sure to try with files having many different extensions. Maybe it even depends on the OS ... I suppose
acceptis case insensitive, but maybe not in every browser.Here is the MDN docs about accept:
accept If the value of the type attribute is file, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers:
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讨论(0) -
Back in 2008 this wasn't important because of the lack of mobile OS'es but now quite important thing.
When you set accepted mime types, then in for example Android user is given system dialog with apps which can provide him the content of mime which file input accepts, what is great because navigating through files in file explorer on mobile devices is slow and often stressful.
One important thing is that some mobile browsers (based on Android version of Chrome 36 and Chrome Beta 37) does not support app filtering over extension(s) and multiple mime types.
讨论(0) -
It is supported by Chrome. It's not supposed to be used for validation, but for type hinting the OS. If you have an
accept="image/jpeg"attribute in a file upload the OS can only show files of the suggested type.讨论(0) -
Accept attribute was introduced in the RFC 1867, intending to enable file-type filtering based on MIME type for the file-select control. But as of 2008, most, if not all, browsers make no use of this attribute. Using client-side scripting, you can make a sort of extension based validation, for submit data of correct type (extension).
Other solutions for advanced file uploading require Flash movies like SWFUpload or Java Applets like JUpload.
讨论(0) -
The
acceptattribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the currentinput. While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they're looking for without having to sift through a hundred different file types.Usage
Note: These examples were written based on the current specification and may not actually work in all (or any) browsers. The specification may also change in the future, which could break these examples.
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>From the HTML Specification (source)
The
acceptattribute may be specified to provide user agents with a hint of what file types will be accepted.If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following:
The string
audio/*- Indicates that sound files are accepted.
The string
video/*- Indicates that video files are accepted.
The string
image/*- Indicates that image files are accepted.
A valid MIME type with no parameters
- Indicates that files of the specified type are accepted.
A string whose first character is a U+002E FULL STOP character (.)
- Indicates that files with the specified file extension are accepted.
讨论(0) -
Yes, it is extremely useful in browsers that support it, but the "limiting" is as a convenience to users (so they are not overwhelmed with irrelevant files) rather than as a way to prevent them from uploading things you don't want them uploading.
It is supported in
- Chrome 16 +
- Safari 6 +
- Firefox 9 +
- IE 10 +
- Opera 11 +
Here is a list of content types you can use with it, followed by the corresponding file extensions (though of course you can use any file extension):
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讨论(0)
加载中...
- 热议问题