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

Posted 2023-03-11

【中文标题】文件输入“接受”属性 - 有用吗？

【英文标题】：File input 'accept' attribute - is it useful?

【发布时间】：2010-09-15 22:09:59

【问题描述】：

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

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

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

【问题讨论】：

关于李欢的回复，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 以了解增强input type="file" 以验证只能选择accepted 文件类型的方法。

【参考方案1】：

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

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

【讨论】：

根据*** (en.wikipedia.org/wiki/…)，Opera 似乎是唯一支持它的浏览器。真的很遗憾。

chrome 似乎在使用它。它可能会进入 webkit

"目前仅 Opera 11+、Chrome 16+ 和 Firefox 9+ 支持 accept 属性。"来自：en.wikipedia.org/wiki/File_select#Accept_attribute_support

IE 10+ 支持接受属性。这是最后一个不这样做的落后者。

正确答案是@bfrohs 的新答案——MIME 类型：iana.org/assignments/media-types

【参考方案2】：

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

【参考方案3】：

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

【讨论】：

我确认accept="image/*" 可以在 Firefox、Chrome 和 Opera 上运行。

它在 Safari 中不起作用，我在 Windows 中使用 Safari 5.1.7

@MMMMS 您需要提供 MIME 类型，而不是文件扩展名。请改用accept="text/plain"。

【参考方案4】：

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

【参考方案5】：

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 规范 (source)

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

如果指定，该属性必须由 set of comma-separated tokens, 每一个都必须是 ASCII case-insensitive 匹配以下之一：

字符串audio/*

表示接受声音文件。

字符串video/*

表示接受视频文件。

字符串image/*

表示接受图像文件。

一个valid MIME type with no parameters

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

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

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

【讨论】：

我需要接受 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'

我只能让上述内容在 Chrome 中工作。在 Firefox 13 中，除了像image/* 这样的单一通配符类型之外，我无法让任何多种文件类型工作（逗号分隔或其他方式）。无赖。

根据规范：Value: A set of comma-separated strings, each of which is a valid MIME type, with no parameters. 只是 mime 类型。没有扩展名。由客户决定 MIME 类型。

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

video/* 表示您无法在 Safari 中上传 mp4，您还需要指定 video/mp4

【参考方案6】：

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

支持

铬 16 + Safari 6 + 火狐9+ IE 10 + 歌剧 11 +

这里是a list of content types，你可以使用它，然后是相应的文件扩展名（当然你可以使用任何文件扩展名）：

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 我有同样的问题，但我看到了，例如Chrome，将 ttf 字体上传为“application/octet-stream”，因此不能在文件输入元素中使用...

只要发现accept也可以使用文件后缀！所以accept=".ttf" 按预期工作。

【参考方案7】：

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

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

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

【参考方案8】：

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

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

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

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

这里是MDN docs about 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

【讨论】：

这是最好的答案，因为它解决了跨浏览器的兼容性问题。

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

为什么不accept="image/jpeg, .jfif, .jif"？

@Alex78191 你读过我写的吗？那是不接受 .jpeg，我不得不放 .jpeg，但也许自 2015 年以来这种情况发生了变化......

@ChristopheRoussy 我还没读过。