文件输入'accept'属性-有用吗?


338

在html下实现文件上传非常简单,但我只是注意到可以将“ accept”属性添加到<input type="file" ...>标记中。

此属性作为限制文件上传到图像等的方式有用吗?最好的使用方法是什么?

或者,是否有一种方法可以限制html文件输入标签的文件类型,最好在文件对话框中?


1
关于李欢的回复,指向w3school的正确链接是:w3schools.com/TAGS/att_input_accept.asp
PixEye 2011年

1
我刚刚尝试使用'accept = application / x-gzip',它可以与'Chrome 19.0.1084.52'一起使用,但是在'FF 13.0'和'IE 8.0.6001'中什么也不做。
Jeach 2012年

请查看jsfiddle.net/jhfrench/cukjxnp6/embedded/result,以获取一种增强方法input type="file"来验证只能选择accepted文件类型。
Jeromy French

Answers:


439

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类型不带参数

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

一个字符串,其第一个字符为U + 002E FULL STOP字符(。)

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

71
我需要接受JPG,PNG,GIF,PDF和EPS文件,但accept='.jpg,.png,.gif,.pdf,.eps'不允许任何选择。我尝试了多种变体-用空格分隔,没有点字符等,但是在Chrome v20中没有骰子,所以我最终使用了mime类型,效果很好:accept='image/jpeg,image/gif,image/png,application/pdf,image/x-eps'
Charlie Schliesser 2012年

7
我只能让以上内容在Chrome中运行。在Firefox 13中,除了执行单个通配符类型外,我无法使用任何多种文件类型(以逗号分隔或其他方式)image/*。笨蛋
Charlie Schliesser 2012年

3
根据规范:Value: A set of comma-separated strings, each of which is a valid MIME type, with no parameters.哑剧类型。没有扩展名。由客户端来确定哑剧类型。
Rudie 2013年

7
我不确定您从哪里获得信息,但是在答案中链接到的规范中,此信息被列为完全有效:A string whose first character is a U+002E FULL STOP character (.) -- Indicates that files with the specified file extension are accepted.
0b10011 2013年

4
video/*表示您无法在Safari中上传mp4,还需要指定video/mp4
Kit Sunde

88

是的,它在支持它的浏览器中非常有用,但是“限制”是给用户带来的便利(因此他们不会被无关文件所淹没),而不是一种阻止他们上传不需要的东西的方式上载。

在以下位置受支持

  • 铬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

我看不到任何字体,例如application / font-woff或application / x-font-ttf。
Triynko 2015年

@Triynko我有同样的问题,但是我发现,例如Chrome,它会将ttf字体上载为“ application / octet-stream”,因此不能在文件输入元素中使用...
estani

只是发现接受也可以使用文件后缀!因此accept=".ttf"按预期工作。
estani

36

在2015年我发现使其同时适用于ChromeFirefox 的唯一方法是放入您要支持的所有可能的扩展,包括变体:

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

Firefox的问题:使用image/jpegmime类型的Firefox将仅显示.jpg文件,这很奇怪,好像通用的代码.jpeg还不行。

无论您做什么,请务必尝试使用具有许多不同扩展名的文件。也许它甚至取决于操作系统...我想accept是不区分大小写的,但可能并非在每个浏览器中都如此。

这是有关acceptMDN文档

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

1
这是最好的答案,因为它解决了跨浏览器的兼容性。
mbomb007'2

1
这个答案很好。记住要包含“ STOP”字符“。”。那是我的问题。
fungusanthrax

35

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

其他用于高级文件上传的解决方案需要Flash电影,例如 SWFUpload)或Java Applets(如JUpload)


5
根据Wikipedia(en.wikipedia.org/wiki/…)的说法,Opera似乎是唯一支持它的浏览器。真是太可惜了。
Zecc 2010年

4
chrome似乎可以使用它。它可能已进入webkit的方式
yincrash 2011年

9
“ Opera 11 +,Chrome 16+和Firefox 9+当前仅支持accept属性。” 来自:en.wikipedia.org/wiki/File_select#Accept_attribute_support
西蒙(Simon)

6
IE 10+支持accept属性。这是最后一个没有的人。
sj26 2012年

1
正确答案是@bfrohs的较新答案-MIME类型:iana.org/assignments/media-types
juanmirocks

24

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


6
我确认accept="image/*"可以在Firefox,Chrome和Opera上使用。
remi.gaubert 2011年

1
它在Safari中不起作用,我在Windows中使用Safari 5.1.7
anand

@MMMMS您需要提供MIME类型,而不是文件扩展名。使用accept="text/plain"代替。
mbomb007 '16

12

已经有好几年了,Chrome至少使用了此属性。从可用性的角度来看,此属性非常有用,因为它将为用户过滤出不必要的文件,从而使用户的使用体验更加流畅。但是,用户仍然可以从类型中选择“所有文件”(或以其他方式绕过过滤器),因此,您应始终在实际使用该文件的位置验证该文件;如果要在服务器上使用它,请在使用它之前在服务器上对其进行验证。用户始终可以绕过任何客户端脚本。


6

如果浏览器使用此属性,它只是为用户的帮助,所以他不会上传多兆字节的文件,只是为了看看它拒绝了服务器...
同样的<input type="hidden" name="MAX_FILE_SIZE" value="100000">标签:如果浏览器使用它,它不会发送文件,但会导致错误,导致UPLOAD_ERR_FORM_SIZEPHP 中出现(2)错误(不确定其他语言的处理方式)。
注意这些对用户有帮助。当然,服务器必须始终在其末端检查文件的类型和大小:在客户端很容易篡改这些值。


0

早在2008年,由于缺少移动操作系统,这并不重要,但现在已变得非常重要。

当您设置接受的mime类型时,例如在Android用户中,系统会显示带有应用程序的系统对话框,这些应用程序可以向他提供文件输入接受的mime内容,这很棒,因为在移动设备上的文件资源管理器中浏览文件的过程很慢,而且通常很麻烦。

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.