在html下实现文件上传非常简单,但我只是注意到可以将“ accept”属性添加到<input type="file" ...>
标记中。
此属性作为限制文件上传到图像等的方式有用吗?最好的使用方法是什么?
或者,是否有一种方法可以限制html文件输入标签的文件类型,最好在文件对话框中?
在html下实现文件上传非常简单,但我只是注意到可以将“ accept”属性添加到<input type="file" ...>
标记中。
此属性作为限制文件上传到图像等的方式有用吗?最好的使用方法是什么?
或者,是否有一种方法可以限制html文件输入标签的文件类型,最好在文件对话框中?
Answers:
该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>
accept
可以指定该属性以向用户代理提示将接受哪种文件类型。如果指定,则该属性必须由一 组逗号分隔的标记组成,每个标记都必须是以下其中一个的 ASCII不区分大小写的 匹配项:
字符串
audio/*
- 表示接受声音文件。
字符串
video/*
- 表示视频文件被接受。
字符串
image/*
- 表示接受图像文件。
一个有效的MIME类型不带参数
- 表示接受指定类型的文件。
一个字符串,其第一个字符为U + 002E FULL STOP字符(。)
- 表示接受具有指定文件扩展名的文件。
accept='.jpg,.png,.gif,.pdf,.eps'
不允许任何选择。我尝试了多种变体-用空格分隔,没有点字符等,但是在Chrome v20中没有骰子,所以我最终使用了mime类型,效果很好:accept='image/jpeg,image/gif,image/png,application/pdf,image/x-eps'
image/*
。笨蛋
Value: A set of comma-separated strings, each of which is a valid MIME type, with no parameters.
哑剧类型。没有扩展名。由客户端来确定哑剧类型。
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
是的,它在支持它的浏览器中非常有用,但是“限制”是给用户带来的便利(因此他们不会被无关文件所淹没),而不是一种阻止他们上传不需要的东西的方式上载。
在以下位置受支持
这是可以使用的内容类型列表,后跟相应的文件扩展名(当然,您可以使用任何文件扩展名):
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
accept=".ttf"
按预期工作。
在2015年,我发现使其同时适用于Chrome和Firefox 的唯一方法是放入您要支持的所有可能的扩展,包括变体:
accept=".jpeg, .jpg, .jpe, .jfif, .jif"
Firefox的问题:使用image/jpeg
mime类型的Firefox将仅显示.jpg
文件,这很奇怪,好像通用的代码.jpeg
还不行。
无论您做什么,请务必尝试使用具有许多不同扩展名的文件。也许它甚至取决于操作系统...我想accept
是不区分大小写的,但可能并非在每个浏览器中都如此。
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
RFC 1867中引入了Accept属性,旨在为文件选择控件启用基于MIME类型的文件类型过滤。但是到2008年,大多数(如果不是全部)浏览器都没有使用此属性。使用客户端脚本,您可以进行基于扩展的验证,以提交正确类型(扩展)的数据。
其他用于高级文件上传的解决方案需要Flash电影,例如 SWFUpload)或Java Applets(如JUpload)。
Chrome支持。它不应该用于验证,而是用于提示操作系统的类型。如果accept="image/jpeg"
文件上传中具有属性,则操作系统只能显示建议类型的文件。
accept="image/*"
可以在Firefox,Chrome和Opera上使用。
accept="text/plain"
代替。