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

有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. 算法的泛化过程(摘自《STL源码剖析》)

    将一个叙述完整的算法转化为程序代码,不是什么难事.然而,如何将算法独立与其所处理的数据结构之外,不受数据结构的羁绊呢?换个说法,如何将我们所写的程序算法适用于任何(或者大部分)未知的数据结构(比如ar ...

  2. VC中TRACE ASSERT VERIFY之用法

    一.TRACE宏     当选择了Debug目标,并且afxTraceEnabled变量被置为TRUE时,TRACE宏也就随之被激活了.但在程序的Release版本中,它们是被完全禁止的.下面是一个典 ...

  3. DataGuard快照(snapshot)数据库

    在Dataguard中,可以将standby备库切换为snapshot快照数据库,在切换为snapshot数据库后,备库将置于可读写的模式.可用于模拟业务功能测试.在使用完成之后,可以将快照数据库切换 ...

  4. throws、throw和try catch

    在学习代理模式的时候,编写动态生成代理类.java文件时,用try{}catch(){}捕获异常发现catch(Exception e)报错,得换成catch(Throwable e),然后又查了查两 ...

  5. Java职业规划

    java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈 ...

  6. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

  7. 解决不能修改 Mysql 慢查询 long_query_time 值的问题

    起因:想修改一下自己电脑上的MySQL的 long_query_time 值,以此来测试 MySQL的慢查询功能. 可是,无论怎么改,show variables like 'long_query_t ...

  8. 偏前端 + rsa加解密 + jsencrypt.min.js--(新增超长字符分段加解密)

    <html> <head> <title>JavaScript RSA Encryption</title> <meta charset=&quo ...

  9. Centos7前后台运行jar包

    方式一: java -jar lf-test-1.0-SNAPSHOT.jar 前台运行,当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出. 方式二: java -ja ...

  10. 学习ThinkPHP5的第一天(安装 连接数据库)

    参考文档:thinkPHP5.0完全手册  一.安装 采用的是git安装方式: 应用项目:https://github.com/top-think/think 核心框架:https://github. ...