FileUpload系列：（4）HTML5的 input:f

網頁上添加一個input file HTML控件：

<input id="File1" type="file" />

默認情況下，所有文件類型都會顯示出來，如果想限制它只顯示特定的文件類型呢，比如“word“,”excel“,”pdf“文件　

解決辦法是可以給它添加一個accept屬性，比如：

<input id="File1" type="file"  accept=".xls,.doc,.txt,.pdf"  />

還有另外一種形式：

<input type="file" accept="application/msword" ><br><br>accept屬性列表<br>

<form> <input type="file" name="pic" id="pic" accept="p_w_picpath/gif, p_w_picpath/jpeg" /></form>

多個類型用逗號分隔開,因為accept是html5的新特性，所以火狐和IE的支持就顯得單薄了

But,這只是最簡單的掩人耳目的做法，還是能選擇其它文件類型。

所以，如果要做到真正意義上限制類型做法（其實這種算不上限制，只是把你要的文件類型默認顯示出來而已，并不是說不能選擇其它的），還是要通過js或者后臺來控制。

那么accept能限制哪些文件呢？見下表。

*.3gpp  audio/3gpp， video/3gpp  3GPP Audio/Video
*.ac3   audio/ac3   AC3 Audio
*.asf   allpication/vnd.ms-asf  Advanced Streaming Format
*.au    audio/basic AU Audio
*.css   text/css    Cascading Style Sheets
*.csv   text/csv    Comma Separated Values
*.doc   application/msword  MS Word Document
*.dot   application/msword  MS Word Template
*.dtd   application/xml-dtd Document Type Definition
*.dwg   p_w_picpath/vnd.dwg   AutoCAD Drawing Database
*.dxf   p_w_picpath/vnd.dxf   AutoCAD Drawing Interchange Format
*.gif   p_w_picpath/gif   Graphic Interchange Format
*.htm   text/html   HyperText Markup Language
*.html  text/html   HyperText Markup Language
*.jp2   p_w_picpath/jp2   JPEG-2000
*.jpe   p_w_picpath/jpeg  JPEG
*.jpeg  p_w_picpath/jpeg  JPEG
*.jpg   p_w_picpath/jpeg  JPEG
*.js    text/javascript， application/javascript JavaScript
*.json  application/json    JavaScript Object Notation
*.mp2   audio/mpeg， video/mpeg  MPEG Audio/Video Stream， Layer II
*.mp3   audio/mpeg  MPEG Audio Stream， Layer III
*.mp4   audio/mp4， video/mp4    MPEG-4 Audio/Video
*.mpeg  video/mpeg  MPEG Video Stream， Layer II
*.mpg   video/mpeg  MPEG Video Stream， Layer II
*.mpp   application/vnd.ms-project  MS Project Project
*.ogg   application/ogg， audio/ogg  Ogg Vorbis
*.pdf   application/pdf Portable Document Format
*.png   p_w_picpath/png   Portable Network Graphics
*.pot   application/vnd.ms-powerpoint   MS PowerPoint Template
*.pps   application/vnd.ms-powerpoint   MS PowerPoint Slideshow
*.ppt   application/vnd.ms-powerpoint   MS PowerPoint Presentation
*.rtf   application/rtf， text/rtf   Rich Text Format
*.svf   p_w_picpath/vnd.svf   Simple Vector Format
*.tif   p_w_picpath/tiff  Tagged Image Format File
*.tiff  p_w_picpath/tiff  Tagged Image Format File
*.txt   text/plain  Plain Text
*.wdb   application/vnd.ms-works    MS Works Database
*.wps   application/vnd.ms-works    Works Text Document
*.xhtml application/xhtml+xml   Extensible HyperText Markup Language
*.xlc   application/vnd.ms-excel    MS Excel Chart
*.xlm   application/vnd.ms-excel    MS Excel Macro
*.xls   application/vnd.ms-excel    MS Excel Spreadsheet
*.xlt   application/vnd.ms-excel    MS Excel Template
*.xlw   application/vnd.ms-excel    MS Excel Workspace
*.xml   text/xml， application/xml   Extensible Markup Language
*.zip   aplication/zip  Compressed Archive

參考文章：

http://www.haorooms.com/post/input_file_leixing