利用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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
javascript之卸载鼠标事件的代码
May 14 Javascript
javascript中的继承实例代码
Apr 27 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
JS常用表单验证方法总结
May 22 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
详解jenkins自动化部署vue
May 14 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
React forwardRef的使用方法及注意点
Jun 13 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乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
PHP session 会话处理函数
2016/06/06 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
自我鉴定模板
2013/10/29 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
mysql事务隔离级别详情
2021/10/24 MySQL
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript