在html下实现文件上传非常简单,但我注意到有一个'accept'属性可以添加到标记中.
此属性是否可用作限制文件上传到图像等的方法？使用它的最佳方法是什么？
或者,有没有办法限制文件类型,最好是在文件对话框中,为html文件输入标签？
该accept属性非常有用.这是浏览器仅显示当前允许的文件的提示input.虽然它通常可以被用户覆盖,但它有助于缩小默认情况下用户的结果范围,因此他们可以获得他们正在寻找的内容,而无需筛选出一百种不同的文件类型.
注意:这些示例是根据当前规范编写的,可能并不适用于所有(或任何)浏览器.规范也可能在未来发生变化,这可能会打破这些例子.
h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }Match all image files (image/*)
Match all video files (video/*)
Match all audio files (audio/*)
Match all image files (image/*) and files with the extension ".someext"
Match all image files (image/*) and video files (video/*)
是的,它在支持它的浏览器中非常有用,但"限制"是为了方便用户(因此它们不会被不相关的文件所淹没),而不是阻止它们上传你不想要它们的东西上传.
它受到支持
Chrome 16 +
Safari 6 +
Firefox 9 +
IE 10 +
歌剧11 +
以下是可以与其一起使用的内容类型列表,后跟相应的文件扩展名(当然,您可以使用任何文件扩展名):
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
Accept属性是在RFC 1867中引入的,旨在为文件选择控件启用基于MIME类型的文件类型过滤.但截至2008年,大多数(如果不是全部)浏览器都不使用此属性.使用客户端脚本,您可以进行一种基于扩展的验证,以提交正确类型(扩展名)的数据.
用于高级文件上载的其他解决方案需要Flash电影,如SWFUpload或Java Applet,如JUpload.
在2015年,我发现使其适用于Chrome和Firefox 的唯一方法是提供您想要支持的所有可能的扩展,包括变体:
accept=".jpeg, .jpg, .jpe, .jfif, .jif"
FireFox的问题:使用image/jpegmime类型FireFox只会显示.jpg文件,非常奇怪,好像常见的一样.jpeg......
无论你做什么,一定要尝试使用具有许多不同扩展名的文件.也许它甚至取决于操作系统......
我认为accept不区分大小写,但可能不是在每个浏览器中.
这是关于接受的MDN文档:
accept如果type属性的值是file,则此属性将指示服务器接受的文件类型,否则将被忽略.该值必须是以逗号分隔的唯一内容类型说明符列表:
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
它受Chrome支持.它不应该用于验证,而是用于暗示操作系统的类型.如果accept="image/jpeg"文件上载中有属性,则操作系统只能显示建议类型的文件.
已经有几年了,Chrome至少使用了这个属性.从可用性的角度来看,此属性非常有用,因为它会过滤掉用户不必要的文件,使他们的体验更加顺畅.但是,用户仍然可以从类型中选择"所有文件"(或以其他方式绕过过滤器),因此您应该始终验证文件实际使用的位置; 如果您在服务器上使用它,请在使用之前对其进行验证.用户始终可以绕过任何客户端脚本.
如果浏览器使用此属性,它只是作为用户的帮助,所以他不会上传一个多兆字节文件只是为了看到服务器拒绝它... 标签
相同:如果浏览器使用它,它不会发送文件但是错误导致UPLOAD_ERR_FORM_SIZEPHP 中的(2)错误(不确定它是如何在其他语言中处理的).
请注意,这些对用户有帮助.当然,服务器必须始终检查文件的类型和大小:在客户端很容易篡改这些值.
京公网安备 11010802040832号 | 京ICP备19059560号-6 