利用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 相关文章推荐
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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
drupal 代码实现URL重写
2011/05/04 PHP
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JavaScript弹窗基础篇
2016/04/27 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python自动抢红包教程详解
2019/06/11 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
用python写PDF转换器的实现
2020/10/29 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
.NET方向面试题
2014/11/20 面试题
企业后勤岗位职责
2014/02/28 职场文书
研究生求职自荐书
2014/06/23 职场文书
公务员政审材料
2014/12/23 职场文书
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript