input file上传文件扩展名限制
方法一(不推荐使用):用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上传文件扩展名限制的更多相关文章
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- 在HTML5的 input:file 上传文件类型控制 遇到的问题
1.input:file 属性的介绍 先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
- input file 上传文件
面试的时候遇到一个问题,要求手写的方式上传文件. 本来觉得很简单,但是结果怎么也成功不了. 前台: <form ID="form1" action="AcceptF ...
- input file上传文件
如何使用input[type='file']来上传文件呢? html: //angular<input type="file" (change)="fileChan ...
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
- 使用input file上传文件中onChange事件只触发一次问题
每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...
- file 上传文件后缀名 限制
比如: 要求只能上传Excel <input type="file" accept="application/vnd.ms-excel,application/vn ...
- input file上传文件弹出框的默认格式设置
我们使用html的input 标签type="flie"时,如何设置默认可选的文件格式 <input id="doc_file" type="f ...
- input:file上传文件类型(记录)
imput 属性有以下几种: 1.type:input类型这就不多说了2.accept:表示可以选择的文件类型,多个类型用英文逗号分开,常用的类型见下表. <input id="fil ...
随机推荐
- [css]【转载张鑫旭】我是如何对网站CSS进行架构的
一.写在前面的 都是自己积累形成的一些东西,可能带有明显的个人印记.不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解.以得到进步与提高. 二.我所知的一些过 ...
- iOS开发 火星坐标转百度坐标
CLLocationCoordinate2D coor = CLLocationCoordinate2DMake(latitude, longitude);//原始坐标 //转换 google地图.s ...
- Ubuntu 16.04服务器安装及软件配置
1.配置静态地址 vim /etc/network/interfaces auto enp1s0 iface enp1s0 inet static address 192.168.1.131 netm ...
- 解决：Unknown table engine 'InnoDB'
把查询mysql的结果输出到文件的过程中出现了错误 ERROR 1286 (42000): Unknown table engine 'InnoDB' 这个问题的原因是新版mysql是 ...
- MVP -----个人理解与示例（android例子 实现）
MVP 也就是Model View Presenter模式,是建立一个工程的一种模式. ======================================================== ...
- 无法查找或打开pdb文件
工具->选项->调试{常规->启动源服务支持,符号->Microsoft符号服务器} 如果再不行.要重新生成一下,(不是重新生成解决方案)
- hdu 5876 ACM/ICPC Dalian Online 1009 Sparse Graph
题目链接 分析:这叫补图上的BFS,萌新第一次遇到= =.方法很简单,看了别人的代码后,自己也学会了.方法就是开两个集合,一个A表示在下一次bfs中能够到达的点,另一个B就是下一次bfs中到不了的点. ...
- Python中 filter | map | reduce | lambda的用法
1.filter(function, sequence):对sequence中的item依次执行function(item),将执行结果为True的item组成一个List/String/Tupl ...
- MongoDB搭建Replica Set Shard Cluster步骤
本文记录从头搭建一个MongoDB 副本集分片集群的过程. 我们要创建一个这样子的分布式集群:有两个shard,每个shard都是一个replica set,各有两个副本(实际产品应用中还应加上一个仅 ...
- WCF初探-9：WCF服务承载 (下)
在WCF初探-8:WCF服务承载 (上)中,我们对宿主的概念.环境.特点做了文字性的介绍和概括,接下来我们将通过实例对这几种寄宿方式进行介绍.为了更好的说明各寄宿环境特点,本实例采用Http和net. ...