It's very easy to upload files under html, but I just noticed that the < input type = "file"... > accept > attribute can be added to the < input type = "file"... > tag.
Is this property useful as a way to restrict file uploads to images, etc? What is the best way to use it?
Or, is there a way to limit the file type of html file input tags, preferably in the file dialog box?
#1 building
The accept property is very useful. This is a prompt for the browser to display only the files allowed by the current input. Although it can usually be overridden by users, by default it can help narrow down users' search, so they can find exactly what they need without having to filter 100 different file types.
usage
Note: these examples are written according to the current specification and may not be practical in all (or any) browsers. The specification may change in the future, which may 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 HTML specification( source )
You can specify the accept property to prompt the user agent which file type to accept.
If specified, the property must have a Group comma separated Tags Each sign Must be one of the following ASCII case insensitive Match:
String audio/*
- Indicates acceptance of the sound file.
String video/*
- Indicates that the video file is accepted.
String image/*
- Indicates that the image file is accepted.
Valid MIME type without parameters
- Indicates that the specified type of file is accepted.
A string whose first character is U + 002E FULL STOP (.)
- Indicates that a file with the specified file extension is accepted.
#2 building
Yes, it's very useful in browsers that support it, but "restrictions" are convenience for users (so they won't be overwhelmed by irrelevant files), not a way to prevent them from uploading things they don't need.
Supported in
- CR 16 +
- Safari 6 +
- Firefox 9 and above
- IE 10 above
- Opera 11 +
This can be used List of content types for , followed by the appropriate file extension (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
#3 building
RFC 1867 The Accept attribute is introduced to enable file type filtering based on MIME type for file selection control. But by 2008, most, if not all, browsers did not use this property. Using client-side scripts, you can perform extension based validation to submit data of the correct type (extension).
Other solutions for advanced file upload require Flash movies (such as SWFUpload) Or Java Applets (such as JUpload) .
#4 building
If the browser uses this property, it is only for the user's help, so he will not upload a multimegabyte file, just to see that the server rejected the file
Same as the < input type = "hidden" name = "max file size" value = "100000" > tag: if the browser uses it, it will not send the file, but it will cause an error of upload? Err? Form? Size (2) in PHP (not to determine how to handle it in other languages).
Note that these are helpful to users. Of course, the server must always check the type and size of the file at its end: it's easy to tamper with these values on the client side.
#5 building
Back in 2008, it didn't matter because of the lack of a mobile operating system, but it has become very important now.
When you set the accepted MIME type, for example, in Android users, the system will display a system dialog box with applications that can provide them with file input to accept the mime content, which is great, because the process of browsing files in file explorer on mobile devices is slow and usually troublesome.
One important thing is that some mobile browsers (based on Android versions of Chrome 36 and Chrome Beta 37) do not support application filtering for extensions and multiple mime types.