小开

Accept属性是在RFC 1867中引入的，目的是为文件选择控件启用基于MIME类型的文件类型过滤。但是到2008年为止，大多数(如果不是全部的话)浏览器都没有使用这个属性。使用客户端脚本，您可以为提交正确类型(扩展)的数据创建一种基于扩展的验证。

其他高级文件上传的解决方案需要像SWFUpload这样的Flash电影或像JUpload这样的Java applet。

小开

如果浏览器使用这个属性，它只是作为一个帮助用户，所以他不会上传一个几兆字节的文件，只是看到它被服务器拒绝 <input type="hidden" name="MAX_FILE_SIZE" value="100000">标签也是一样:如果浏览器使用它，它不会发送文件，而是在PHP中发送一个导致UPLOAD_ERR_FORM_SIZE(2)错误的错误(不确定在其他语言中如何处理) 注意这些是用户的帮助。当然，服务器端必须始终检查文件的类型和大小:在客户端很容易篡改这些值

小开

Chrome浏览器支持。它不应该用于验证，而是用于类型提示操作系统。如果你上传的文件中有accept="image/jpeg"属性，操作系统只能显示建议类型的文件。

小开

几年过去了，Chrome至少利用了这个属性。从可用性的角度来看，这个属性非常有用，因为它可以为用户过滤掉不必要的文件，使他们的体验更加顺畅。但是，用户仍然可以从类型中选择“所有文件”(或者绕过过滤器)，因此您应该始终验证实际使用的文件;如果您在服务器上使用它，请在使用之前在服务器上验证它。用户总是可以绕过任何客户端脚本。

小开

最佳答案

accept属性非常有用。这是对浏览器的一个提示，只显示当前input允许的文件。虽然它通常可以被用户覆盖，但默认情况下，它有助于为用户缩小搜索结果的范围，因此他们可以准确地得到他们要找的东西，而不必筛选100种不同的文件类型。

使用

这些例子是根据当前的规范编写的，实际上可能无法在所有(或任何)浏览器中工作。规范在未来也可能会改变，这可能会打破这些例子

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属性可以被指定为为用户代理提供一个提示什么文件类型将被接受
如果指定，属性必须由a组成逗号分隔的令牌集, 每一个都必须是 ASCII不区分大小写匹配下列之一:

字符串audio/*

表示接受声音文件。

字符串video/*

表示接受视频文件。

字符串image/*

表示接受镜像文件。

一个没有参数的有效MIME类型

表示接受指定类型的文件。

首字符为U+002E句号字符(.)的字符串。

表示接受具有指定扩展名的文件。

小开

是的，它在支持它的浏览器中非常有用，但“限制”是为了方便用户(这样他们就不会被无关的文件淹没)，而不是为了阻止他们上传你不想让他们上传的东西。

它在

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

小开

在2008年，由于缺少移动操作系统，这一点并不重要，但现在却非常重要。

当你设置可接受的mime类型时，例如，Android用户会得到系统对话框，应用程序可以为他提供文件输入接受的mime内容，这是很棒的，因为在移动设备上的文件资源管理器中浏览文件是缓慢的，经常有压力。

重要的一点是，一些移动浏览器(基于Android版本的Chrome 36和Chrome Beta 37)不支持应用程序对扩展和多种mime类型的过滤。

小开

在2015年，我发现唯一的办法要使它同时适用于铬和火狐，就要把你想要支持的所有可能的扩展，包括变体(包括前面的点!):

accept=".jpeg, .jpg, .jpe, .jfif, .jif"

Firefox的问题:使用image/jpeg mime类型Firefox将只显示.jpg文件，非常奇怪，好像常见的.jpeg是不可以的…

无论你做什么，一定要尝试使用具有许多不同扩展名的文件。也许这甚至取决于操作系统…我认为accept是不区分大小写的，但可能不是在每个浏览器中

下面是关于接受MDN文档:

< p >接受如果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

文件输入'属性——它有用吗?

使用

来自HTML规范(源)

字符串`audio/*`

字符串`video/*`

字符串`image/*`

一个没有参数的有效MIME类型

首字符为U+002E句号字符(.)的字符串。

文件输入'属性——它有用吗?

使用

来自HTML规范(源)

字符串audio/*

字符串video/*

字符串image/*

一个没有参数的有效MIME类型

首字符为U+002E句号字符(.)的字符串。

字符串`audio/*`

字符串`video/*`

字符串`image/*`