文件输入'accept'属性 - 它有用吗？资源

问题描述 投票：314回答：8

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

此属性是否可用作限制文件上传到图像等的方法？使用它的最佳方法是什么？

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

html html5 filter cross-browser mime-types
8个回答
412
投票

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

Usage

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

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)

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

如果指定，该属性必须由set of comma-separated tokens组成，每个ASCII case-insensitive必须是以下之一的audio/*匹配：

The string video/*

  • 表示接受声音文件。

The string image/*

  • 表示接受视频文件。

The string valid MIME type with no parameters

  • 表示接受图像文件。

A a list of content types

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

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

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

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

它受到支持

  • Chrome 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 你可以使用它，然后是相应的文件扩展名（当然你可以使用任何文件扩展名）：

RFC 1867
34
投票

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

其他高级文件上传解决方案需要像JUpload这样的Flash电影或像accept=".jpeg, .jpg, .jpe, .jfif, .jif" 这样的Java Applet。

33
投票

在2015年，我发现使其适用于Chrome和Firefox的唯一方法是提供您想要支持的所有可能的扩展，包括变体：

image/jpeg

FireFox的问题：使用.jpg mime类型FireFox只显示.jpeg文件，非常奇怪，好像常见的accept不行......

无论你做什么，一定要尝试使用具有许多不同扩展名的文件。也许它甚至取决于操作系统......

我想MDN docs about accept不区分大小写，但可能不是在每个浏览器中。

这是 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 ：

accept如果type属性的值是file，则此属性将指示服务器接受的文件类型，否则将被忽略。该值必须是以逗号分隔的唯一内容类型说明符列表：

accept="image/jpeg"
24
投票

它受Chrome支持。它不应该用于验证，而是用于暗示操作系统的类型。如果文件上载中有<input type="hidden" name="MAX_FILE_SIZE" value="100000">属性，则操作系统只能显示建议类型的文件。

11
投票

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

6
投票

如果浏览器使用此属性，它只是作为用户的帮助，所以他不会上传一个多兆字节的文件，只是为了看到它被服务器拒绝... 对于UPLOAD_ERR_FORM_SIZE标记也是如此：如果浏览器使用它，它将不会发送文件但是错误导致PHP中的qazxswpoi（2）错误（不确定它是如何在其他语言中处理的）。 请注意，这些对用户有帮助。当然，服务器必须始终检查文件的类型和大小：在客户端很容易篡改这些值。

0
投票

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

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.