input file類型，文件類型的限制

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> input file類型，文件類型的限制

編輯：HTML5教程

直接限制input type='file'的文件類型限制，通過accept屬性進行設定,多個類型用逗號分隔開,因為accept是html5的新特性，所以IE的支持就顯得單薄了

效果展示：
http://hovertree.com/texiao/html5/41/

如:

示例完整代碼：


<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>input type=file 文件上傳時後綴限定示例_何問起</title><base target="_blank" />
	<meta charset="utf-8" />
    <style>a{color:blue}</style>
</head>
<body>
    <div style="max-width:600px;margin:0px auto;">
        <h2>input type=file 文件上傳時後綴限定示例</h2>
        <form>
            限定為圖片：<input type=file accept="image/*" id="hovertree" />
            <hr />
            限定為png或者jpg圖片：<input type="file" accept="image/png,image/jpeg" id="keleyi" />
            <hr />
            使用js限定文件格式為gif：<input type="file" id="hovertreescj" />
        </form>
        <br />
        <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/h/bjaf/h1fenrfm.htm">代碼說明</a> <a href="http://hovertree.com/texiao/">更多特效</a>
    </div>
    <script>

        document.getElementById("hovertreescj").accept = "image/gif";

        document.write(document.getElementById("hovertreescj").accept);
    </script>
</body>
</html>

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 image/vnd.dwg AutoCAD Drawing Database *.dxf image/vnd.dxf AutoCAD Drawing Interchange Format *.gif image/gif Graphic Interchange Format *.htm text/html HyperText Markup Language *.html text/html HyperText Markup Language *.jp2 image/jp2 JPEG-2000 *.jpe image/jpeg JPEG *.jpeg image/jpeg JPEG *.jpg image/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 image/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 image/vnd.svf Simple Vector Format *.tif image/tiff Tagged Image Format File *.tiff image/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

HTML5教程

HTML5 Canvas的性能提高技巧經驗分享: 使用緩存技術實現預繪制，減少重復繪制Canvs內容很多時候我們在Canvas上繪制與更新，總是會保
HTML表格水平對齊屬性: 在水平方向上，可以設定表格的對齊方式，分別有居左、居中、居右3種。基本語法 &
用canvas畫簡單的“我的世界”人物頭像: 前言：花了4天半終於看完了《Head First HTML5》，這本書的學習給我最大的感受就是，自己

HTML入門知識 HTML5教程關於HTML HTML和Xhtml HTML5特效代碼 HTML5詳解

小編推薦

HTML5各種頭部meta標簽的功能(推薦) html5 CSS過度-webkit-transition使用介紹 HTML5 LocalStorage 本地存儲原理詳解藍色的憂郁白色的雪JS特效 H5移動端頁面設計心得分享 HTML5基礎，第4部分：點睛之筆Canvas 處理HTML5新標簽的浏覽器兼容版問題 H5即將被拋棄嗎？ Html5元素及基本語法詳解非常有用的 HTML5 開發教程和速查手冊

DIV CSS 佈局教程網

相關文章