利用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实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
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文件大小格式化函数合集
2014/03/10 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
python在控制台输出进度条的方法
2015/06/20 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python直接访问私有属性的简单方法
2016/07/25 Python
详谈python http长连接客户端
2017/06/12 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
新手学python应该下哪个版本
2020/06/11 Python
python中数字是否为可变类型
2020/07/08 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
小学生暑假感言
2014/02/06 职场文书
银行委托书范本
2014/04/04 职场文书
五一口号
2014/06/19 职场文书
简历自我评价范文
2019/04/24 职场文书
Mysql如何查看是否使用到索引
2022/12/24 MySQL