Html 文件输入“接受”属性 - 有用吗？

File input 'accept' attribute - is it useful?

提问by Darren Oster

Implementing a file upload under html is fairly simple, but I just noticed that there is an 'accept' attribute that can be added to the <input type="file" ...>tag.

在html下实现文件上传相当简单，但我刚刚注意到有一个'accept'属性可以添加到<input type="file" ...>标签中。

Is this attribute useful as a way of limiting file uploads to images, etc? What is the best way to use it?

这个属性作为限制文件上传到图像等的方式有用吗？使用它的最佳方法是什么？

Alternatively, is there a way to limit file types, preferably in the file dialog, for an html file input tag?

或者，有没有办法限制 html 文件输入标签的文件类型，最好是在文件对话框中？

回答by 0b10011

The acceptattribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input. While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they're looking for without having to sift through a hundred different file types.

该accept属性非常有用。提示浏览器仅显示当前input. 虽然它通常可以被用户覆盖，但默认情况下它有助于缩小用户的结果范围，因此他们可以准确地获得他们正在寻找的内容，而无需筛选一百种不同的文件类型。

Usage

用法

Note:These examples were written based on the current specification and may not actually work in all (or any) browsers. The specification may also change in the future, which could break these examples.

注意：这些示例是根据当前规范编写的，可能实际上并不适用于所有（或任何）浏览器。规范也可能在未来发生变化，这可能会破坏这些示例。

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>

From the HTML Specification (source)

来自 HTML 规范（源代码）

The acceptattribute may be specified to provide user agents with a hint of what file types will be accepted.

If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitivematch for one of the following:

The string audio/*

• Indicates that sound files are accepted.

The string video/*

• Indicates that video files are accepted.

The string image/*

• Indicates that image files are accepted.

A valid MIME type with no parameters

• Indicates that files of the specified type are accepted.

A string whose first character is a U+002E FULL STOP character (.)

• Indicates that files with the specified file extension are accepted.

accept可以指定该属性以向用户代理提供将接受哪些文件类型的提示。

如果指定，则该属性必须由一 组以逗号分隔的标记组成，每个标记都必须是以下一项的不区分大小写的 ASCII匹配：

字符串 audio/*

• 表示接受声音文件。

字符串 video/*

• 表示接受视频文件。

字符串 image/*

• 表示接受图像文件。

一个有效的MIME类型不带参数

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

第一个字符是 U+002E FULL STOP 字符 (.)

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

回答by iconoclast

Yes, it is extremely useful in browsers that support it, but the "limiting" is as a convenience to users (so they are not overwhelmed with irrelevant files) rather than as a way to prevent them from uploading things you don't want them uploading.

是的，它在支持它的浏览器中非常有用，但“限制”是为了方便用户（因此他们不会被不相关的文件淹没），而不是为了防止他们上传您不想要的东西上传。

It is supported in

它支持

• Chrome 16 +
• Safari 6 +
• Firefox 9 +
• IE 10 +
• Opera 11 +

• 铬 16 +
• 野生动物园 6 +
• 火狐 9 +
• 浏览器 10 +
• 歌剧 11 +

Here is a list of content typesyou can use with it, followed by the corresponding file extensions (though of course you can use any file extension):

这是您可以使用的内容类型列表，后跟相应的文件扩展名（当然您可以使用任何文件扩展名）：

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

回答by Christophe Roussy

In 2015 the only wayI found to make it work for both Chromeand Firefoxis to put all possible extensions you want to support, including variants:

在 2015 年，我发现让它同时适用于Chrome和Firefox的唯一方法是放置您想要支持的所有可能的扩展，包括变体：

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

Problem with Firefox: Using the image/jpegmime type Firefox will only show .jpgfiles, very strange as if the common .jpegwas not ok...

Firefox 的问题：使用image/jpegmime 类型的 Firefox 只会显示.jpg文件，很奇怪，好像普通的.jpeg不行...

Whatever you do, be sure to try with files having many different extensions. Maybe it even depends on the OS ... I suppose acceptis case insensitive, but maybe not in every browser.

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

Here is the MDN docs about accept:

这是关于 accept的MDN 文档：

accept If the value of the type attribute is file, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers:

    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

如果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

回答by CMS

Accept attribute was introduced in the RFC 1867, intending to enable file-type filtering based on MIME type for the file-select control. But as of 2008, most, if not all, browsers make no use of this attribute. Using client-side scripting, you can make a sort of extension based validation, for submit data of correct type (extension).

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

Other solutions for advanced file uploading require Flash movies like SWFUploador Java Applets like JUpload.

其他高级文件上传解决方案需要 Flash 电影（如SWFUpload）或 Java Applet（如JUpload）。

回答by magikMaker

It is supported by Chrome. It's not supposed to be used for validation, but for type hinting the OS. If you have an accept="image/jpeg"attribute in a file upload the OS can only show files of the suggested type.

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

回答by Kevin Fee

It's been a few years, and Chrome at least makes use of this attribute. This attribute is very useful from a usability standpoint as it will filter out the unnecessary files for the user, making their experience smoother. However, the user can still select "all files" from the type (or otherwise bypass the filter), thus you should always validate the file where it is actually used; If you're using it on the server, validate it there before using it. The user can always bypass any client-side scripting.

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

回答by PhiLho

If the browser uses this attribute, it is only as an help for the user, so he won't upload a multi-megabyte file just to see it rejected by the server...
Same for the <input type="hidden" name="MAX_FILE_SIZE" value="100000">tag: if the browser uses it, it won't send the file but an error resulting in UPLOAD_ERR_FORM_SIZE(2) error in PHP (not sure how it is handled in other languages).
Note these are helps for the user. Of course, the server must always check the type and size of the file on its end: it is easy to tamper with these values on the client side.

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

回答by Jakub Mendyk

Back in 2008 this wasn't important because of the lack of mobile OS'es but now quite important thing.

早在 2008 年，由于缺乏移动操作系统，这并不重要，但现在非常重要。

When you set accepted mime types, then in for example Android user is given system dialog with apps which can provide him the content of mime which file input accepts, what is great because navigating through files in file explorer on mobile devices is slow and often stressful.

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

One important thing is that some mobile browsers (based on Android version of Chrome 36 and Chrome Beta 37) does not support app filtering over extension(s) and multiple mime types.

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