利用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 相关文章推荐
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
angular十大常见问题
Mar 07 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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开发需要注意的安全问题
2010/09/01 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
bootstrap data与jquery .data
2014/07/07 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
Python实现的最近最少使用算法
2015/07/10 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
一看就懂得Python的math模块
2018/10/21 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
PyTorch中permute的用法详解
2019/12/30 Python
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
2016/06/28 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
编程输出如下图形
2013/11/24 面试题
临床医学大学生求职信
2013/09/28 职场文书
便利店促销方案
2014/02/20 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
《白鹅》教学反思
2014/04/13 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL