利用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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
js实现下拉框二级联动
Dec 04 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
深入理解javascript prototype的相关知识
Sep 19 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实现微信对账单处理
2018/10/01 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python Tkinter版学生管理系统
2019/02/20 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
护理专业自荐信
2013/12/03 职场文书
机关单位动员会主持词
2014/03/20 职场文书
社区服务标语
2014/07/01 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
绵山导游词
2015/02/05 职场文书
辞职信的写法
2015/02/27 职场文书
2015年光棍节活动总结
2015/03/24 职场文书