利用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幻灯片插件bxslider样式改进实例
Oct 15 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
小程序实现搜索框
Jun 19 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 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单文件版在线代码编辑器
2015/03/12 PHP
yii分页组件用法实例分析
2015/12/28 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
初中英语教学反思
2014/01/25 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
2015年护士节活动总结
2015/02/10 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
离婚被告代理词
2015/05/23 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
解析Java中的static关键字
2021/06/14 Java/Android