利用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 相关文章推荐
JS Timing
Apr 21 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
Vue组件化开发思考
Feb 02 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
深入学习JavaScript 高阶函数
Jun 11 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 文件上传功能实现代码
2009/06/24 PHP
php 代码优化之经典示例
2011/03/24 PHP
基于php split()函数的用法详解
2013/06/05 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
vuex入门最详细整理
2020/03/04 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Python 使用office365邮箱的示例
2020/10/29 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
经典c++面试题六
2012/01/18 面试题
秸秆管理实施方案
2014/03/15 职场文书
新品发布会主持词
2014/04/02 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
学校团代会开幕词
2016/03/04 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL