利用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使用手册之三 CSS操作
Mar 24 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
loading动画特效小结
Jan 22 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
javascript实现滚动条效果
Mar 24 Javascript
JavaScript基于用户照片姓名生成海报
May 29 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
js获取ip和地区
2017/03/10 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
使用PYTHON接收多播数据的代码
2012/03/01 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
详解Python self 参数
2019/08/30 Python
后勤主管工作职责
2013/12/07 职场文书
留学推荐信写作指南
2014/01/25 职场文书
《花木兰》教学反思
2014/04/09 职场文书
取保候审保证书
2014/04/30 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
护士找工作求职信
2014/07/02 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
60句有关成长的名言
2019/09/04 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python