您的位置:首页 > Web前端 > HTML

HTML 文件类表单元素如何限制上传类型,Accept属性设置

2015-10-25 21:54 726 查看
需求描述:简单的控制file的选择类型

解决方法:使用HTML input file 的accept属性控制

实例:

<form action="demo_form.asp">
<input type="file" name="pic" accept="image/gif,image/jpg" />
<input type="submit" />
</form>


<form action="demo_form.asp">
<input type="file" name="pic" accept=".gif,.jpg" />
<input type="submit" />
</form>


解读:这里重点关注 accept属性。 上面的代码设置了文件只能选择 gif 和jpg,HTML 4.01 与 HTML 5 之间的差异,低版本IE貌似不支持。

注意点:这种限制并不可靠,只是做一个简单的限制,最好是服务端再次进行判断。

使用Js验证文件类型:

//验证文件的格式
function validateFile(){
var fileObject=$("#filename");
var errorObject=$("#error");
var filepath=fileObject.val();
var fileArr=filepath.split("//");
var fileTArr=fileArr[fileArr.length-1].toLowerCase().split(".");
var filetype=fileTArr[fileTArr.length-1];
if(filetype!="xls"&&filetype!="xlsx"&&filetype!="doc"&&filetype!="docx"
&&filetype!="jpeg"&&filetype!="jpg"&&filetype!="ppt"&&filetype!="pptx"
&&filetype!="txt"&&filetype!="bmp"&&filetype!="png"&&filetype!="gif"){
fileObject.focus();
errorObject.html("上传文件必须为图片、doc、ppt、xls、txt文件!");
}else{
errorObject.remove();
}
}


附支持的文件类型(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


个人独立博客网站:http://blog.wxp123.me/p/50
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: