×
热搜词

QQ登录

只需一步,快速开始

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

HTML 文件类表单元素如何限制上传类型,Accept属性设置
需求描述:简单的控制file的选择类型


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

实例:


[HTML] 纯文本查看 复制代码
<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验证文件类型:


[JavaScript] 纯文本查看 复制代码
//验证文件的格式 
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值):


[HTML] 纯文本查看 复制代码
*.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



度仙门网 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与度仙门网享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和度仙门网的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、度仙门网管理员和版主有权不事先通知发贴者而删除本文

帖子地址: 

玄元一墨

写了 246 篇文章,拥有下品灵石 9544 枚,中品灵石 11421 枚,上品灵石 10002 枚,被 4 人关注

欢迎访问度仙门网!请在论坛右上角的个人设置中修改你的个性签名!
踩
回复

使用道具

您需要登录后才可以回帖 登录 | 立即注册
B Color Link Quote Code Smilies

成为第一个吐槽的人

Copyright © 2018-, Duxian studio.

返回顶部