文件输入'接受'属性

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

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

另外,有没有办法限制文件类型,最好在文件对话框中,为html文件输入标签?


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>

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

它支持英寸

  • Chrome 16 +
  • Safari 6 +
  • Firefox 9 +
  • IE 10 +
  • Opera 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
    

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

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

    链接地址: http://www.djcxy.com/p/46863.html

    上一篇: File input 'accept' attribute

    下一篇: the file you are trying to open is in a different format than specified by the file extension in Asp.Net