方法一(不推荐使用):用jS获获取扩展名进行验证:

<script type="text/javascript" charset="utf-8">

function change(e){

var src=e.target || window.event.srcElement; //获取事件源,兼容chrome/IE

src.style.background='red';

alert( src.value );

//测试chrome浏览器、IE6,获取的文件名带有文件的path路径

//下面把路径截取为文件名

var filename=src.value;

alert( filename.substring( filename.lastIndexOf('\\')+1 ) );

//获取文件名的后缀名(文件格式)

alert( filename.substring( filename.lastIndexOf('.')+1 ) );

}

</script>

</head>

<body >

选择文件:

<br>

<input type='file' onchange="change(event);" >

</body>

方法二(好方法):

HTML <input> 标签的 accept 属性

实例

在文件上传中使用 accept 属性,本例中的输入字段可以接受 GIF 和 JPEG 两种图像:(上传选择文件时候,只显示这两种文件)

<form>
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

亲自试一试

如果不限制图像的格式,可以写为:accept="image/*"。

定义和用法

accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。

提示:请避免使用该属性。应该在服务器端验证文件上传。

http://www.w3school.com.cn/tags/att_input_accept.asp

input file上传文件扩展名限制的更多相关文章

  1. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  2. 在HTML5的 input:file 上传文件类型控制 遇到的问题

    1.input:file 属性的介绍  先瞅代码吧 <form> <input type="file" name="pic" accept=& ...

  3. input file 上传文件

    面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...

  4. input file上传文件

    如何使用input[type='file']来上传文件呢? html: //angular<input type="file" (change)="fileChan ...

  5. 巧妙利用label标签实现input file上传文件自定义样式

    提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可    但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同   我们往 ...

  6. 使用input file上传文件中onChange事件只触发一次问题

    每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...

  7. file 上传文件后缀名 限制

    比如: 要求只能上传Excel <input type="file" accept="application/vnd.ms-excel,application/vn ...

  8. input file上传文件弹出框的默认格式设置

    我们使用html的input 标签type="flie"时,如何设置默认可选的文件格式 <input id="doc_file" type="f ...

  9. input:file上传文件类型(记录)

    imput 属性有以下几种: 1.type:input类型这就不多说了2.accept:表示可以选择的文件类型,多个类型用英文逗号分开,常用的类型见下表. <input id="fil ...

随机推荐

  1. PHP 小方法之 随机生成几位字符串

    if(! function_exists ('get_rand_string') ) { function get_rand_string($len=6,$format='ALL') { switch ...

  2. 聊天界面之气泡文本cell(二)使用Autolayout

    聊天界面主要是cell的动态高度计算和效率的问题,参考网上的两篇文章: 1.优化UITableViewCell高度计算的那些事  http://www.cocoachina.com/ios/20150 ...

  3. ASP.NET MVC Html.Partial/Html.RenderPartial/Html.Action/Html.RenderAction区别

    1. @Html.Raw() 方法输出带有html标签的字符串: <div style="margin:10px 0px 0px;border:1px;border-color:red ...

  4. netbean快捷键

    1.Application应用程序的参数args的设置,在Build->Set Main Projects Configuration 2.程序运行快捷键F6 3.@Deprecated 4.代 ...

  5. 【Jenkins】Windows下安装&访问jenkins

    1. 下载jenkins.war包 下载地址:http://jenkins-ci.org/ 2. 之后在cmd里启动jenkins,命令如下: java -jar (放置war包路径,最好没有中文)j ...

  6. 深入理解 AngularJS 的 Scope

    JavaScript 的原型继承就是奇葩. 之前在 V2EX 上看到讨论说,不会 OOP 的 JavaScript 的程序员就是野生程序员.看来我是属于野生的.   一.遇到的问题 问题发生在使用 A ...

  7. update 多表

    update energylog set value=(a.value+c.value)/2from energylog as a, energylog as cwhere a.idvariable= ...

  8. hibernate基于注解的维护权反转:@OneToMany(mappedBy=)

    背景说明:首先是SSH环境下,对象基于注解的方式映射到数据库: 昨天遇到一个比较纠结的问题,@OneToMany(mappedBy="xxx"), mappedBy属性有什么用,然 ...

  9. linux命令每日一练习-mkdir,rm

    mkdir 创建一个文件夹 mkdir -p tian/hong 递归创建文件目录 mkdir tian hong 创建多个文件 mkdir -v tian 创建文件的时候显示信息 mkdir -m ...

  10. 64位Win7系统下vs2010调试无法连接oracle

    64位win7系统的Program Files (x86)路径中有括号,oracle不认识这样的路径,所以就出现不能连接数据库的问题.所以我们可以将vs2010的内部调试web服务器WebDev.We ...