<input type="file" ...>标记中。此属性是否有用，可以限制文件上传图片等？最好的使用方法是什么？
或者，有没有一种方法可以限制文件类型，最好是在文件对话框中为html文件输入标记？
#1 楼
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大小写-insensitive
匹配以下其中一项：
字符串
audio/* 表示可接受声音文件。
字符串
video/* 表示视频文件已被接受。
字符串
image/* 表示接受了图像文件。
没有参数的有效MIME类型
表示文件的
第一个字符为U + 002E FULL STOP字符（。）的字符串。
表示具有指定文件扩展名的文件被接受。
评论
我需要接受JPG，PNG，GIF，PDF和EPS文件，但accept ='。jpg，.png，.gif，.pdf，.eps'不允许任何选择。我尝试了多种变体-用空格分隔，没有点字符等，但是在Chrome v20中没有骰子，所以我最终使用了mime类型，效果很好：accept ='image / jpeg，image / gif，image / png，应用/ pdf，图像/ x-eps'
– Charlie Schliesser
2012年6月27日在16:49
我只能让以上内容在Chrome中工作。在Firefox 13中，除了执行像image / *这样的单个通配符类型外，我无法使用任何多种文件类型（逗号分隔或其他方式）。笨蛋
– Charlie Schliesser
2012年6月27日17:31
根据规范：值：一组用逗号分隔的字符串，每个字符串都是有效的MIME类型，没有参数。只是哑剧类型。没有扩展名。由客户端来确定哑剧类型。
–鲁迪
13年8月31日在13:48
我不确定您从哪里获得信息，但是在我链接到答案的规范中，这被列为完全有效：一个字符串，其第一个字符为U + 002E FULL STOP字符（。）-表示具有指定文件扩展名的文件将被接受。
– 0b10011
13年8月31日在15:57
video / *表示您无法在Safari中上传mp4，还需要指定video / mp4
– Kit Sunde
2013年12月10日下午2:04
#2 楼
是的，它在支持它的浏览器中非常有用，但是“限制”是给用户带来的便利（因此他们不会被无关文件所淹没），而不是一种防止他们上传不需要的东西的方式Chrome 16 +
Safari 6 +
Firefox 9 +
IE 10 +支持。
Opera 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
评论
我看不到任何字体，例如application / font-woff或application / x-font-ttf。
– Triynko
15年12月14日在15:46
@Triynko我有同样的问题，但是我看到了，例如Chrome浏览器将ttf字体上传为“ application / octet-stream”，因此不能在文件输入元素中使用...
–estani
19年9月18日在9:00
只是发现接受也可以使用文件后缀！因此accept =“。ttf”可以正常工作。
–estani
19-09-18在9:07
#3 楼
在2015年，我发现使其同时适用于Chrome和Firefox的唯一方法是放置您要支持的所有可能的扩展，包括变体（包括前面的点！）：accept=".jpeg, .jpg, .jpe, .jfif, .jif"
Firefox的问题：使用
image/jpeg MIME类型的Firefox仅显示.jpg文件，这很奇怪，好像普通的.jpeg不合适... 无论做什么，请务必尝试使用具有许多不同扩展名的文件。
它甚至取决于操作系统...我认为
accept不区分大小写，但可能并非在每个浏览器中都如此。这是有关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
评论
这是最好的答案，因为它解决了跨浏览器的兼容性。
–mbomb007
17年2月7日在17:32
这个答案很好。记住要包括“ STOP”字符“。”。那是我的问题。
–真菌类
17年12月12日19:45在
#4 楼
RFC 1867中引入了Accept属性，旨在为文件选择控件启用基于MIME类型的文件类型过滤。但是到2008年，大多数（如果不是全部）浏览器都没有使用此属性。使用客户端脚本，您可以进行某种基于扩展的验证，以提交正确类型（扩展名）的数据。其他用于高级文件上传的解决方案需要Flash电影（如SWFUpload或Java Applet如JUpload） 。
评论
根据Wikipedia（en.wikipedia.org/wiki/…）的说法，Opera似乎是唯一支持它的浏览器。真是太可惜了。
– Zecc
2010-12-12 12:12
chrome似乎可以使用它。它可能找到了进入webkit的方式
– yincrash
2011-2-10 22:27
“ Opera 11 +，Chrome 16+和Firefox 9+当前仅支持accept属性。”来自：en.wikipedia.org/wiki/File_select#Accept_attribute_support
–西蒙
2012年3月11日14:40
IE 10+支持accept属性。这是最后一个没有的人。
– sj26
2012年6月1日下午5:48
正确答案是@bfrohs的较新答案-MIME类型：iana.org/assignments/media-types
– juanmirocks
2013年1月23日17:18
#5 楼
Chrome支持。它不应该用于验证，而是用于提示操作系统的类型。如果文件上传中具有accept="image/jpeg"属性，则操作系统只能显示建议类型的文件。评论
我确认accept =“ image / *”可在Firefox，Chrome和Opera上使用。
– remi.gaubert
2011-12-27 15:16
它在Safari中不起作用，我在Windows中使用Safari 5.1.7
–anand
13年4月2日在10:31
@MMMMS您需要提供MIME类型，而不是文件扩展名。请改用accept =“ text / plain”。
–mbomb007
16年8月8日在17:03
#6 楼
已经有好几年了，Chrome至少使用了此属性。从可用性的角度来看，此属性非常有用，因为它将为用户过滤出不必要的文件，从而使用户的使用体验更加流畅。但是，用户仍然可以从类型中选择“所有文件”（或以其他方式绕过过滤器），因此，您应始终在实际使用该文件的位置进行验证。如果要在服务器上使用它，请在使用它之前在服务器上对其进行验证。用户始终可以绕过任何客户端脚本。#7 楼
如果浏览器使用此属性，那么它仅是对用户的帮助，因此他不会上载一个数兆字节的文件，只是看到它被服务器拒绝...与
<input type="hidden" name="MAX_FILE_SIZE" value="100000">标记相同：如果浏览器使用它时，它不会发送文件，但会导致错误，导致PHP中出现UPLOAD_ERR_FORM_SIZE（2）错误（不确定如何用其他语言处理）。请注意，这些内容对用户有所帮助。当然，服务器必须始终在文件末尾检查文件的类型和大小：很容易在客户端篡改这些值。
#8 楼
早在2008年，由于缺少移动操作系统，这并不重要，但现在已变得非常重要。当您设置接受的mime类型时，例如在Android用户中，系统会显示带有应用的系统对话框，这些应用可以向他提供文件输入接受的mime内容，这很棒，因为在文件浏览器中浏览文件在移动设备上的速度很慢，而且通常会感到压力。
重要的一点是，某些移动浏览器（基于Android版本的Chrome 36和Chrome Beta 37）不支持对扩展程序和MIME类型。
评论
关于李欢的答复，指向w3school的正确链接是：w3schools.com/TAGS/att_input_accept.asp我刚刚尝试过使用'accept = application / x-gzip'，并且它可以与'Chrome 19.0.1084.52'一起使用，但是在'FF 13.0'和'IE 8.0.6001'中什么也不做。
请查看jsfiddle.net/jhfrench/cukjxnp6/embedded/result，以获取增强输入类型=“ file”的方法，以验证只能选择可接受的文件类型。