利用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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
JS简单实现登陆验证附效果图
Nov 19 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
js验证上传图片的方法
May 12 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python和bash统计CPU利用率的方法
2015/07/10 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
python实现zabbix发送短信脚本
2018/09/17 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
金融专业个人求职信
2013/09/22 职场文书
旅游项目开发策划书
2014/01/18 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
如何用PHP websocket实现网页实时聊天
2021/05/26 PHP
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android