利用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 相关文章推荐
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
js生成随机数的方法实例
Oct 16 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
微信小程序异步处理详解
Nov 10 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
Angular短信模板校验代码
Sep 23 Javascript
JavaScript原生数组函数实例汇总
Oct 14 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
深入了解php4(2)--重访过去
2006/10/09 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python pickle模块用法实例分析
2015/05/27 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Linux下python制作名片示例
2018/07/20 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Python中私有属性的定义方式
2020/03/05 Python
大专生自荐信
2013/10/04 职场文书
化工机械应届生求职信
2013/11/04 职场文书
铁路个人事迹材料
2014/01/30 职场文书
高中生操行评语大全
2014/04/25 职场文书
文明村镇申报材料
2014/05/06 职场文书
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL