文件輸入'accept'屬性-有用嗎？

在html下實現文件上傳很是簡單，但我只是注意到能夠將<input type="file" ...> accept>屬性添加到<input type="file" ...>標記中。

此屬性做爲限制文件上傳到圖像等的方式有用嗎？ 最好的使用方法是什麼？

或者，是否有一種方法能夠限制html文件輸入標籤的文件類型，最好在文件對話框中？

---

#1樓

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規範（ 源 ）

能夠指定accept屬性，以向用戶代理提示將接受哪一種文件類型。

若是指定，則該屬性必須由一組逗號分隔的標記組成 ，每一個標記都必須是如下其中一個的ASCII不區分大小寫的匹配項：

字符串audio/*

• 表示接受聲音文件。

字符串video/*

• 表示視頻文件被接受。

字符串image/*

• 表示接受圖像文件。

沒有參數的有效MIME類型

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

一個字符串，其第一個字符爲U + 002E FULL STOP字符（。）

• 表示接受具備指定文件擴展名的文件。

---

#2樓

是的，它在支持它的瀏覽器中很是有用，可是「限制」是給用戶帶來的便利（所以他們不會被無關文件所淹沒），而不是一種阻止他們上傳不須要的東西的方式上載。

在如下位置受支持

• 鉻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

---

#3樓

RFC 1867中引入了Accept屬性，旨在爲文件選擇控件啓用基於MIME類型的文件類型過濾。 可是到2008年，大多數（若是不是所有）瀏覽器都沒有使用此屬性。 使用客戶端腳本，您能夠進行基於擴展的驗證，以提交正確類型（擴展）的數據。

其餘用於高級文件上傳的解決方案須要Flash電影（如SWFUpload）或Java Applets（如JUpload） 。

---

#4樓

若是瀏覽器使用此屬性，那麼它僅是對用戶的幫助，所以他不會上載一個數兆字節的文件，只是爲了查看服務器拒絕了該文件...
與<input type="hidden" name="MAX_FILE_SIZE" value="100000">標記相同：若是瀏覽器使用它，它將不會發送文件，但會致使PHP中出現UPLOAD_ERR_FORM_SIZE （2）錯誤（不是肯定如何用其餘語言處理它）。
注意這些對用戶有幫助。 固然，服務器必須始終在其末端檢查文件的類型和大小：在客戶端很容易篡改這些值。

---

#5樓

早在2008年，因爲缺乏移動操做系統，這並不重要，但如今已變得很是重要。

當您設置接受的mime類型時，例如在Android用戶中，系統會顯示帶有應用程序的系統對話框，這些應用程序能夠向他提供文件輸入接受的mime內容，這很棒，由於在移動設備上的文件資源管理器中瀏覽文件的過程很慢，並且一般很麻煩。

重要的一件事是，某些移動瀏覽器（基於Android版本的Chrome 36和Chrome Beta 37）不支持對擴展程序和多種mime類型的應用程序過濾。