文件输入'接受'attribute-这有用吗？
https://stackoverflow.com/questions/181214
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
执行文件上传下html是相当简单的，但是我只是注意到，有一个"接受"的属性，可以加入的 <input type="file" ...> 标记。
是这样的属性作为一个有用的办法限制文件上传来的图像，等等？什么是最好的方式来使用它？
或者，是否有一种方法限制文件的类型、最好在该文件的对话，为html文件输入的标签?
解决方案
的 accept 属性是非常有用的。它是一个暗示以浏览器为只有出示文件，这些文件允许电流 input.虽然通常可以被复盖的用户，它可以帮助缩小的结果，供用户通过默认，因此他们可以得到什么他们要找的没有必要过一百个不同类型的文件。
使用
注： 这些示例被写入根据当前的规范和实际上不可能在所有(或)浏览器。说明书中也可以改变未来，这可能会破坏这些例子。
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>从HTML规范(来源)
的
accept属性可以被指定为用户提供剂用 暗示什么类型的文件将会被接受。如果指定的属性，必须由一个 组逗号分隔的标记, 每一个都必须被一个 ASCII情况不敏感的 匹配，用于以下之一:
字符串
audio/*
- 表示声音文件被接受。
字符串
video/*
- 表示的视频文件都可以接受。
字符串
image/*
- 表示图像的文件被接受。
一个 有效的MIME type没有参数
- 表示该文件指定的种类型都可以接受。
一串的第一个角色是一个U+002E完全停止字(.)
- 表示文件与指定的文件的扩展都能接受的。
其他提示
是的，这是非常有用浏览器，支持它，但"限制"就是为了方便用户(使他们不是不知所措的无关紧要的文件)，而不是作为一种方式，以防止他们从上传的东西你不想让他们上传。
它支持在
- 铬16+
- Safari6+
- Firefox9+
- 即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
2015年唯一的方法我发现它适用于 Chrome 和 Firefox ，是为了支持您想要支持的所有可能的扩展程序，包括变体：
accept=".jpeg, .jpg, .jpe, .jfif, .jif"
FireFox问题：使用image/jpeg mime类型FireFox只会显示.jpg文件，非常奇怪，好像常见的.jpeg不合适...
无论您做什么，请务必尝试使用具有许多不同扩展名的文件。 也许它甚至取决于操作系统......
我认为accept不区分大小写，但可能不在每个浏览器中。
以下是关于接受的MDN文档：
接受 如果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至少会使用这个属性。从可用性的角度来看，此属性非常有用，因为它会过滤掉用户不必要的文件，使他们的体验更加顺畅。但是，用户仍然可以选择<！>“所有文件<！>”;从类型（或绕过过滤器），因此你应该始终验证文件实际使用的位置;如果您在服务器上使用它，请在使用之前对其进行验证。用户始终可以绕过任何客户端脚本。
如果浏览器使用此属性，它只是作为用户的帮助，所以他不会上传一个多兆字节的文件只是为了看到它被服务器拒绝...
对于<input type="hidden" name="MAX_FILE_SIZE" value="100000">标记也是如此：如果浏览器使用它，它将不会发送文件，但会导致错误导致PHP中出现UPLOAD_ERR_FORM_SIZE（2）错误（不确定如何在其他语言中处理它）。
请注意，这些对用户有帮助。当然，服务器必须始终检查文件的类型和大小：在客户端很容易篡改这些值。
早在2008年，这并不重要，因为缺乏移动操作系统，但现在非常重要。
当您设置接受的mime类型时，例如Android用户被给予系统对话框，其中可以为他提供文件输入接受的mime内容，这很有用，因为在移动设备上浏览文件浏览器中的文件很慢并经常有压力。
一个重要的事情是，某些移动浏览器（基于Android版Chrome 36和Chrome Beta 37）不支持通过扩展程序和多种mime类型进行应用过滤。
