需求描述:简单的控制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

HTML 文件类表单元素如何限制上传类型,Accept属性设置的更多相关文章

  1. input type=file文件选择表单元素二三事

    一.原生input上传与表单form元素 如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢,就是: enctype="multipart/form-dat ...

  2. 上传文件表单file,限制上传文件类型的方法--参数accept

    我们使用<input type="file" />来上传文件,但是当你只想要上传某种格式的文件,比如说(jpg)文件时.可以通过accept来限制. <form& ...

  3. [Nginx 2] form表单提交,图片上传

    导读:昨晚恶补了一些Nginx服务器的东西,从整体上对Nginx有一个初步的了解.上午去找师哥问了问目前项目中的使用情况,然后就开始上传图片了.这里就简单总结整理一下今天的成果,以后接着提升.简单粗暴 ...

  4. iframe和form表单实现ajax请求上传数据

    form的target属性设置为iframe的name值时,表示提交到url后返回的数据显示到iframe区域 <form action="/upload.html" met ...

  5. html5表单元素详解

    表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...

  6. Form表单元素

    Form表单元素 action method input: name value type: text password button radio checkbox file submit reset ...

  7. `<jsp:getProperty>`动作和`<jsp:setProperty>`动作的使用在一个静态页面填写图书的基本信息,页面信息提交给其他页面,并且在其页面显示。要去将表单元素的值赋值给Java

    <jsp:getProperty>动作和<jsp:setProperty>动作的使用 1.<jsp:getProperty>动作 语法格式: <jsp:get ...

  8. MVC中使用内建的HTML辅助方法产生表单元素提交表单与button按钮事件的陷阱

    网站模板页有个登陆的退出按钮,当点击时跳转到登陆页面. <button onclick="logout()" >退出</button> $("#l ...

  9. 表单元素的required,autocomplete,list用法

    required: 当在一个表单元素如:input中加上required属性时,点击提交表单按钮,针对input会弹出一个默认的警告信息,如下图: 代码如下: <form id="my ...

随机推荐

  1. nutz 使用beetl

    src目录或src同级的其他目录(比如conf)下创建 beetl.properties文件,文件内容如下 (maven项目)在resources目录下创建 RESOURCE_LOADER=org.b ...

  2. 开车旅行 【NOIP2012 D1T3】

    开车旅行 [NOIP2012 D1T3] 倍增 首先令\(a[i]\)表示从i出发最近的城市下标,\(b[i]\)表示从i出发第二近的城市下标 可以维护一个\(\text{set<pair< ...

  3. Java EE学习笔记(六)

    初识MyBatis 1.MyBatis的定义 1).MyBatis(前身是iBatis)是一个支持普通SQL查询.存储过程以及高级映射的持久层框架. 2).MyBatis框架也被称之为ORM(Obje ...

  4. 关于gc日志中Desired Survivor的疑问和对象晋升老年代的小结

    问题背景 (下面的所有内容都是根据书上的Serial/Serial Old收集器下的情况) 在<深入理解JVM>一书中的——3.6.3长期存活的对象将进入老年代的介绍中, 一个例子的jvm ...

  5. light OJ 1282 - Leading and Trailing 数学 || double技巧

    http://lightoj.com/volume_showproblem.php?problem=1282 #include <cstdio> #include <cstdlib& ...

  6. java emoji表情存储解决方案

    1.问题产生情况 我遇到这个问题是做微信开发的时候有些有用的头像用了微信的emoji表情,然而我的mysql数据库用的编码是utf8_general_ci,就是utf-8编码,结果也就报错误了. 2. ...

  7. 文件操作,Io流。

    private void textBox1_TextChanged(object sender, EventArgs e) { } private void button1_Click(object ...

  8. 11.JAVA-Object类之finalize(),clone(),toString()等方法覆写

    1.Object介绍 Object类是一个特殊的类,是所有类(包括数组,接口 )的父类,如果一个类没有用extends明确指出继承于某个类,那么它默认继承Object类,所以可以通过向上转型的方法使用 ...

  9. 死磕 java并发包之AtomicStampedReference源码分析(ABA问题详解)

    问题 (1)什么是ABA? (2)ABA的危害? (3)ABA的解决方法? (4)AtomicStampedReference是什么? (5)AtomicStampedReference是怎么解决AB ...

  10. input禁止显示用户输入历史记录

    input标签中加上属性autocomplete="off"