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

有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. 二进制mysql安装相关知识

    建议安装5.x版本 高版本没安装经验的慎用 1.1 关闭防火墙systemctl stop firewalld.service #停止firewall#慎用 systemctl disable fir ...

  2. 基于jQuery的轮播焦点图图

    轮播焦点图 ——仿淘宝首页jquery轮播焦点图,我特意去taobao首页看了下它的轮播,好像有点相似,我不保证是我写的这样. 本例来源:站长之家http://sc.chinaz.com/jiaobe ...

  3. linux 命令 uniq

    linux命令uniq去重 实例详细说明linux下去除重复行命令uniq 一,uniq干什么用的 文本中的重复行,基本上不是我们所要的,所以就要去除掉.linux下有其他命令可以去除重复行,但是我觉 ...

  4. 关于虚拟机linux网络的一个问题(基于cntos7)

    刚刚开始学习搭建Linux集群,目前出现的比较麻烦的一个问题是Linux网络ip问题.其实网上好多出现类似问题的解答大部分说是因为克隆的问题,但实际情况先克隆产生的问题应该是很好排查的.所幸,有博主针 ...

  5. 关于python文件问题

    一.python内部的首行命令 #!/usr/bin/env python #_*_coding:utf8_*_ 第一条命令用于Linux系统中的./命令,用于声明用什么Python解释器.第二条命令 ...

  6. Kafka(1)-概述

    一. 内部原理 1. 点对点模式(一对一,消费者主动拉取数据,消息收到后消息清除) 点对点模型通常是一个基于拉取或者轮询的消息传送模型,这种模型从队列中请求信息,而不是将消息推送到客户端.这个模型的特 ...

  7. spark+phoenix

    phoenix作为查询引擎,为了提高查询效率,为phoenix表创建了二级索引,而数据是sparkstreaming通过hbase api直接向hbase插数据.那么问题来了,对于phoenix的二级 ...

  8. P2P借款人信用风险实时监控模型设计

    P2P借款人信用风险实时监控模型设计 P2P网络贷款(“peer-to-peer”)为中小企业和个人提供了便利的融资渠道.近年来,随着互联网金融的逐步发展,P2P网贷已成为时下炙手可热的互联网金融新模 ...

  9. Django 中跨 app 创建外键、多对多引用的方法

    问题描述 我的 Django 项目中有两个 app. 在 PersonalCenter app下的 models.py 下定义了一个 Footprint 类: 在 LoginAndRegister a ...

  10. USB-Blaster驱动安装失败——文件哈希值不在指定目录中

    右击此电脑,选择管理,选择设备管理器,更新USB-Blaster驱动出现问题 问题: 文件的哈希值不在指定的目录文件中,如图: 解决办法: Windows键+R→shutdown.exe /r /o ...