使用JS验证文件类型
项目中涉及到这一需求,在此贴出代码分享给大家,
有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验证文件类型的更多相关文章
- js验证对象类型
js验证对象类型 1. Object.prototype.toString.call() 这是最佳解决方案,可以用作通用方式处理.各种类型的判断依据类似于[object Object],替换的是后边的 ...
- js判断文件类型大小并给出提示
上传文件是工作中常用的功能,不同的场景对不同的文件类型和文件大小都有不同的要求: <form id="uploadForm" method="post" ...
- 客户端js判断文件类型和文件大小即限制上传大小
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- [转]客户端js判断文件类型和文件大小即限制上传大小
原文地址:https://www.jb51.net/article/43498.htm 需要脚本在客户端判断大小和文件类型,由于网上没有适合的,就自己写了一个并测试 文件上传大小限制的一个例子,在此与 ...
- MVC验证12-使用DataAnnotationsExtensions对整型、邮件、最小值、文件类型、Url地址等验证
原文:MVC验证12-使用DataAnnotationsExtensions对整型.邮件.最小值.文件类型.Url地址等验证 本文体验来自http://dataannotationsextension ...
- 文件上传漏洞演示脚本之js验证
文件上传漏洞演示脚本之js验证 0 0 716 关于文件上传漏洞,想必玩web安全的同学们都有接触,之前本站也发布过一篇文章介绍文件上传漏洞的各种绕过方法,但是只是有文档却没有演示代码 ...
- JS弹出下载对话框以及实现常见文件类型的下载
写在前面 JS要实现下载功能,一般都是这么几个过程:生成下载的URL,动态创建一个A标签,并将其href指向生成的URL,然后触发A标签的单击事件,这样就会弹出下载对话框,从而实现了一个下载的功能. ...
- Vue Element-ui 框架:路由设置 限制文件类型 表单验证 回车提交 注意事项 监听事件
1.验证上传文件的类型: (1)验证图片类型 <template> <el-upload class="avatar-uploader" action=" ...
- 去掉Myeclipse对JS等文件的验证
在用Myeclipse导入新工程或在写代码时,最郁闷的就是它对js,jsp,html的验证太严格了,有时会呈现一个红叉或者一个黄色的感慨号,一运行就报Cannot return from outsid ...
随机推荐
- ansible copy 模块 changed false 没有变化
在分发配置文件的时候,我用命令ansible big_hosthub -m copy -a "src=/home/clouder/deploy-conf.xml dest=/home/cl ...
- 字符型设备驱动程序-first-printf以及点亮LED灯(一)
学习使用 Linux 的 字符型设备驱动 来 进行 . 学习地址:http://edu.51cto.com/lesson/id-25710.html 第一步: 首先写 三个函数 ,2017年5月17 ...
- Oracle数据库对表基本的操作--增删查改
--向student表中加入入学时间属性,其数据类型为日期型alter table student add scome date; --删除student表中的入学时间属性alter table st ...
- iOS TabBarItem设置红点(未读消息)
实现原理: 其实是自定义一个view,将view添加到UITabBar上面,也可以是一个按钮,设置背景图片,和label.废话少说直接上代码搞一个UITabBar的分类 #import <UIK ...
- 洛谷P1501 [国家集训队]Tree II(LCT)
题目描述 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 u2 v2:将树中原有的 ...
- Django实现支付宝支付(沙箱)
1.安装SDK 点击右侧沙箱当面付接入指导,之后可以看到一个下载SDK的按钮,点击后,会有python的SDK下载链接,但还是属于公测中,也可以通过在cmd里输入以下代码来安装. pip instal ...
- mac安装配置mysql
目录 mac安装配置mysql 1.mysql的安装 2.设置root用户的密码 3.分别执行一下命令 4.配置mysql环境变量 mac安装配置mysql 1.mysql的安装 安装过程十分简单 ...
- 执行mongod其他实例出现的问题
windows环境下,配置其他mongo实例,会出现一些问题 1.配置路径不对,执行bat文件时出现闪屏 根据提示创建C:\data\db\ 目录(因为mongodb默认在/data/db下创建数据库 ...
- Hadoop源码学习笔记之NameNode启动场景流程三:FSNamesystem初始化源码剖析
上篇内容分析了http server的启动代码,这篇文章继续从initialize()方法中按执行顺序进行分析.内容还是分为三大块: 一.源码调用关系分析 二.伪代码执行流程 三.代码图解 一.源码调 ...
- www.pantom.top
新建小站 https://www.pantom.top