您的位置:首页 - 教程 - HTML5 - 正文
input file类型,文件类型的限制

直接限制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

评论: