方法一(不推荐使用):用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注意事项

    1. 不要使用mysql_函数 这一天终于来了,从此你不仅仅"不应该"使用mysql_函数.PHP 7 已经把它们从核心中全部移除了,也就是说你需要迁移到好得多的mysqli_函数 ...

  2. Head First 设计模式 --7 适配器模式 外观模式

    适配器模式:将一个类东街口转换成客户期望的另一个接口.适配器让原本接口不兼容的类可以合作无间. 适配器模式有两种,对象适配器和类的适配器.先看一下对象适配器. 还是看最开始鸭子的例子,如果此时鸭子不够 ...

  3. android View事件分发机制结论

    原始博客有对源码的分析:http://blog.csdn.net/lmj623565791/article/details/39102591 结论:1.view事件的分发流程: dispatchTou ...

  4. Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。 自适应表格

    引用的css: <link href="@Url.Content("~/Css/bootstrap.min.css")" rel="styles ...

  5. iOS中属性与成员变量的区别

    一.类Class中的属性property 在ios第一版中,我们为输出口同时声明了属性和底层实例变量,那时,属性是oc语言的一个新的机制,并且要求你必须声明与之对应的实例变量,例如: @interfa ...

  6. 打造高大上的Canvas粒子(一)

    HTML5 Canvas <canvas>标签定义图形,比如图表和其他图像,必须用脚本(javascript)绘制图形. 举例:绘制矩形 <script> var c = do ...

  7. Centos 关闭后台进程 .sh 等

    命令后加 & 符号可以让其在后台运行 如: node app.js & 想要关闭分两步: ps aux | grep app.js 查看app.js  所运行的进程号 kill 进程号 ...

  8. 源代码tfs to git

    TFSàgit可以保留完整历史记录,方法: https://github.com/git-tfs/git-tfs 系统变量的path里加上: ;C:\Program Files (x86)\Git\b ...

  9. SQL语句---nvl 用法

    SQL语句---nvl 用法   一NVL函数是一个空值转换函数 NVL(表达式1,表达式2) 如果表达式1为空值,NVL返回值为表达式2的值,否则返回表达式1的值. 该函数的目的是把一个空值(nul ...

  10. select document library from certain list 分类： Sharepoint 2015-07-05 07:52 6人阅读 评论(0) 收藏

    S using System; using Microsoft.SharePoint; namespace Test { class ConsoleApp { static void Main(str ...