利用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获取服务器时间的两个简单方法
Jan 08 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
对vuex中store和$store的区别说明
Jul 24 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 的 __FILE__ 常量
2007/01/15 PHP
php导入导出excel实例
2013/10/25 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
js常用DOM方法详解
2017/02/04 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
python计算二维矩形IOU实例
2020/01/18 Python
基于matplotlib xticks用法详解
2020/04/16 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
农业开发项目建议书
2014/05/16 职场文书
英语教研活动总结
2014/07/02 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
学习雷锋主题班会
2015/08/14 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
MySQL中一条update语句是如何执行的
2022/03/16 MySQL