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

有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. spring学习笔记---数据库事务并发与锁详解

    多事务运行并发问题 在实际应用中,往往是一台(或多台)服务器向无数客户程序提供服务,当服务器查询数据库获取数据时,如果没有采用必要的隔离机制,可能会存在数据库事务的并发问题,下面是一些常见的并发问题分 ...

  2. ubuntu 14.04 将窗体button移到右边

    刚刚安装了Ubuntu 14.04,想改动窗体button的位置.但依照曾经的办法发现不行了,在gconftool-->apps中找不到metacity. 多方查找后找到解决方式,例如以下 Ub ...

  3. everything对已经不存在的文件还进行索引,报错“系统找不到指定的驱动器”

    使用everything时,总是报下面的错.也就是对于已经不存在的文件或者文件夹还保留着对应的索引. 如下图: 这个其实我们在选项中设置一下规则就可以了. 一. 二. 三. ok啦.

  4. list 去重复元素

    public static List removeDuplicate(List list){ List listTemp = new ArrayList(); for(int i=0;i<lis ...

  5. luogu11月月赛T3咕咕咕(组合数学)

    题目描述 小 F 是一个能鸽善鹉的同学,他经常把事情拖到最后一天才去做,导致他的某些日子总是非常匆忙. 比如,时间回溯到了 2018 年 11 月 3 日.小 F 望着自己的任务清单: 看 iG 夺冠 ...

  6. 【Linux】管理文件系统

    文件系统概念: 文件系统是指文件的组织与管理结构,是一个有关于磁盘中各种有用信息的记录——即是保存以下信息的结构记录表 当前所使用磁盘的容量信息 磁盘的可用信息,包括已占用和剩余的空间: 文件与目录的 ...

  7. emlog 百度熊掌号提交插件-基于Emlog6.0.1特别版美化

    插件截图 插件简介 此插件在发布文章的时候自动向百度熊掌号提交,有利于百度熊掌号收录.基于Emlog6.0.1特别版美化的插件. 在百度推送插件的基础上修改制作而成与百度推送共存,解放双手,走向人生巅 ...

  8. AttributeError: module 'tensorflow' has no attribute 'enable_eager_execution'

    Traceback (most recent call last): File "linear_regression_eager_api.py", line 15, in < ...

  9. 2017-2018-1 20155320《信息安全技术》实验二——Windows口令破解

    2017-2018-1 20155320<信息安全技术>实验二--Windows口令破解 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 实验 ...

  10. 20155325 2016-2017-2 《Java程序设计》第2周学习总结

    教材学习内容总结 上节课讲了些思维方法:git,vim的使用技巧,推荐了picpick截图软件. 第三章书本上涵盖了基本语法内容 由于在语法方面java和c有相似之处,所以我重点关注不同之处和易忽略之 ...