项目中涉及到这一需求,在此贴出代码分享给大家,

有2中方式,一种是input中使用accept 方式

一种是使用js正则表达式判断,个人推荐使用js正则表达式,因为accept 有的浏览器并不支持,而且accept并不是强制。

第一种

<input  type="file" name="file" id="ck_attach_path" style="width:98%;" accept=".xls,.doc,.txt,.pdf"  />

第二种

<input type="file" name="file"   id="ck_attach_path" id="file" style="width:98%;" onchange="CheckFile(this);" >
        //文件上传验证.
function CheckFile(obj) {
var array = new Array('txt', 'pdf', 'doc','docx','xls','xlsx','pptx'); //可以上传的文件类型
if (obj.value == '') {
alert("选择要上传的文件!");
return false;
}
else {
var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3];
var isExists = false;
for (var i in array) {
if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
isExists = true;
return true;
}
}
if (isExists == false) {
obj.value = null;
alert("上传文件类型不正确!");
return false;
}
return false;
}
}

使用JS验证文件类型的更多相关文章

  1. js验证对象类型

    js验证对象类型 1. Object.prototype.toString.call() 这是最佳解决方案,可以用作通用方式处理.各种类型的判断依据类似于[object Object],替换的是后边的 ...

  2. js判断文件类型大小并给出提示

    上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求: <form id="uploadForm" method="post" ...

  3. 客户端js判断文件类型和文件大小即限制上传大小

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. [转]客户端js判断文件类型和文件大小即限制上传大小

    原文地址:https://www.jb51.net/article/43498.htm 需要脚本在客户端判断大小和文件类型,由于网上没有适合的,就自己写了一个并测试 文件上传大小限制的一个例子,在此与 ...

  5. MVC验证12-使用DataAnnotationsExtensions对整型、邮件、最小值、文件类型、Url地址等验证

    原文:MVC验证12-使用DataAnnotationsExtensions对整型.邮件.最小值.文件类型.Url地址等验证 本文体验来自http://dataannotationsextension ...

  6. 文件上传漏洞演示脚本之js验证

    文件上传漏洞演示脚本之js验证 0 0       716   关于文件上传漏洞,想必玩web安全的同学们都有接触,之前本站也发布过一篇文章介绍文件上传漏洞的各种绕过方法,但是只是有文档却没有演示代码 ...

  7. JS弹出下载对话框以及实现常见文件类型的下载

    写在前面 JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能. ...

  8. Vue Element-ui 框架:路由设置 限制文件类型 表单验证 回车提交 注意事项 监听事件

    1.验证上传文件的类型: (1)验证图片类型 <template> <el-upload class="avatar-uploader" action=" ...

  9. 去掉Myeclipse对JS等文件的验证

    在用Myeclipse导入新工程或在写代码时,最郁闷的就是它对js,jsp,html的验证太严格了,有时会呈现一个红叉或者一个黄色的感慨号,一运行就报Cannot return from outsid ...

随机推荐

  1. 解析oracle对select加锁的方法以及锁的查询 转

    转自 https://www.jb51.net/article/37587.htm 本篇文章是对oracle对select加锁的方法以及锁的查询进行了详细的分析介绍,需要的朋友参考下 解析oracle ...

  2. MongoDB常用指令

    db 查看当前操作的数据库 show dbs 显示所有数据库 show collections 显示当前数据库下的所有集合 use database_name 连接到一个名叫[database_nam ...

  3. 自己做的js甘特图插件

    版权所有,禁止转载 内容都在代码中,上图上代码! 代码 <!DOCTYPE html> <html> <head> <title>ganttu.html ...

  4. Tarjan算法初探(3):求割点与桥以及双连通分量

    接上一节Tarjan算法初探(2):缩点 在此首先提出几个概念: 割点集合:一个无向连通图G 若删除它的一个点集 以及点集中所有点相连的边(任意一端在点集中)后 G中有点之间不再连通则称这个点集是它的 ...

  5. Java面试题整理1

    Java基础部分 JDK和JRE有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境.JRE:Java Runtime ...

  6. Redis 4.0.X版本reshard出现错误的解决办法

    原文链接:https://my.oschina.net/juluking/blog/1606222 原作者的版本是Redis 4.0.6,我的版本是4.0.8,所以猜测是否所有4.0.x版本都有此问题 ...

  7. 客户端与服务器交互中的Token

    Token:在计算机身份认证中是令牌(临时)的意思,类似于 MD5 加密之后的长字符串 特点:1.随机性,不可预测  2.具有有限期 3.唯一 作用:1.防止重复提交  2.防止CSRF(跨站请求伪造 ...

  8. 利用.htaccess文件将多个子域名解析至对应的子目录

    对于不支持子域名解析但是支持 .htaccess 的主机来说,这个功能就非常有用了 假设有主域名 ppios.com,子域名 yspx.ppios.com 和 ask.ppios.com,设置结果为访 ...

  9. 分别给Python类和实例增加属性和方法

    #定义一个类Student class Student(object): pass #给类增加一个属性name Student.name = 'xm' print Student.name # xm ...

  10. 20155209实验一《Java开发环境的熟悉》实验报告

    20155209实验一<Java开发环境的熟悉>实验报告 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验步骤一 ...