利用javascript/jquery对上传文件格式过滤的方法


Posted in Javascript onJuly 25, 2009
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style><!-- 
.errorInfo{ 
color:red; 
padding-left:5px; 
} 
--></style><style bogus="1"> .errorInfo{ 
color:red; 
padding-left:5px; 
}</style> 
<script type="text/javascript"><!-- 
$(function(){ 
$("#DataReport").click(function(){ 
//上传文件不能为空,格式必须为xsl和xlsx 
var flag=true; 
var fileObject=$("input[name='file']"); 
var filepath=$("input[name='file']").val(); 
if(filepath==undefined||$.trim(filepath)==""){ 
fileObject.focus().next().text("请选择上传文件!"); 
flag=false; 
}else{ 
var fileArr=filepath.split("\\"); 
var fileTArr=fileArr[fileArr.length-1].toLowerCase().split("."); 
var filetype=fileTArr[fileTArr.length-1]; 
if(filetype!="xls"&&filetype!="xlsx"){ 
fileObject.focus().next().text("上传文件必须为Excel文件!"); 
flag=false; 
}else{ 
fileObject.next().text(""); 
} 
} //进行其他相关校验 
if(flag){ 
alert("文件上传成功"); 
} 
}); 
}); 
// --></script> 
</head> 
<body> 
<form action="#" method="POST" enctype="multipart/form-data"> 
<div><input type="file" name="file"><span class='errorInfo'></span></div> 
<div><input type="button" value="上传" id="DataReport"></div> 
</form> 
</body> 
</html>

注:在head中加入jquery的引入语句,博客还是会过滤掉引入的js文件。
javascript中对上传文件格式过滤的方法:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style><!-- 
.errorInfo{ 
color:red; 
padding-left:5px; 
} 
--></style><style bogus="1"> .errorInfo{ 
color:red; 
padding-left:5px; 
}</style> 
<script type="text/javascript"><!-- 
function validateFile(){ 
var flag=true; 
var fileObject=document.getElementById("file"); 
var errorObject=document.getElementById("error"); 
var filepath=fileObject.value; 
if(filepath==undefined||filepath==""){ 
fileObject.focus(); 
errorObject.innerText="请选择上传文件!"; 
flag=false; 
}else{ 
var fileArr=filepath.split("\\"); 
var fileTArr=fileArr[fileArr.length-1].toLowerCase().split("."); 
var filetype=fileTArr[fileTArr.length-1]; 
if(filetype!="xls"&&filetype!="xlsx"){ 
fileObject.focus(); 
errorObject.innerText="上传文件必须为Excel文件!"; 
flag=false; 
}else{ 
errorObject.innerText=""; 
} 
} 
//进行其他相关校验 
if(flag){ 
alert("文件上传成功"); 
} 
} 
// --></script> 
</head> 
<body> 
<form action="#" method="POST" enctype="multipart/form-data"> 
<div><input type="file" id="file"><span id="error" class='errorInfo'></span></div> 
<div><input type="button" value="上传" id="DataReport" onclick="validateFile()"></div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 #Javascript
jquery 表单下所有元素的隐藏
Jul 25 #Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 #Javascript
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 #Javascript
Prototype Selector对象学习
Jul 23 #Javascript
Prototype 工具函数 学习
Jul 23 #Javascript
JQuery CSS样式控制 学习笔记
Jul 23 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
numpy.where() 用法详解
2019/05/27 Python
python实现图像拼接
2020/03/05 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python绘制趋势图的示例
2020/09/17 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
编辑求职信样本
2013/12/16 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
现金出纳岗位职责
2014/03/15 职场文书
省文明单位申报材料
2014/05/08 职场文书
单位工作证明书格式
2014/10/04 职场文书
2015年社区工作总结
2015/04/08 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
详解NodeJS模块化
2021/06/15 NodeJs
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python