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

網(wǎng)頁上添加一個input file HTML控件：

成都網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)建站于2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

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

默認(rèn)情況下，所有文件類型都會顯示出來，如果想限制它只顯示特定的文件類型呢，比如“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,這只是最簡單的掩人耳目的做法，還是能選擇其它文件類型。

所以，如果要做到真正意義上限制類型做法（其實這種算不上限制，只是把你要的文件類型默認(rèn)顯示出來而已，并不是說不能選擇其它的），還是要通過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

新聞名稱：FileUpload系列：（4）HTML5的input:f
網(wǎng)頁地址：http://muchs.cn/article40/ghgsho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、自適應(yīng)網(wǎng)站、企業(yè)建站、網(wǎng)站導(dǎo)航、App設(shè)計、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)