客户端js判断文件类型和文件大小即限制上传大小


Posted in Javascript onNovember 20, 2013

由于项目需要!需要脚本在客户端判断大小和文件类型!自己网上找资料找的好辛苦!索性自己写了一个并测试 文件上传大小限制的一个例子,兼容ie6,ie7,ie8 ,Google Chrome,ff等浏览器

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript"> 
var isIE = /msie/i.test(navigator.userAgent) && !window.opera; 
function fileChange(target,id) { 
var fileSize = 0; 
var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"]; 
var filepath = target.value; 
var filemaxsize = 1024*2;//2M 
if(filepath){ 
var isnext = false; 
var fileend = filepath.substring(filepath.indexOf(".")); 
if(filetypes && filetypes.length>0){ 
for(var i =0; i<filetypes.length;i++){ 
if(filetypes[i]==fileend){ 
isnext = true; 
break; 
} 
} 
} 
if(!isnext){ 
alert("不接受此文件类型!"); 
target.value =""; 
return false; 
} 
}else{ 
return false; 
} 
if (isIE && !target.files) { 
var filePath = target.value; 
var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); 
if(!fileSystem.FileExists(filePath)){ 
alert("附件不存在,请重新输入!"); 
return false; 
} 
var file = fileSystem.GetFile (filePath); 
fileSize = file.Size; 
} else { 
fileSize = target.files[0].size; 
} var size = fileSize / 1024; 
if(size>filemaxsize){ 
alert("附件大小不能大于"+filemaxsize/1024+"M!"); 
target.value =""; 
return false; 
} 
if(size<=0){ 
alert("附件大小不能为0M!"); 
target.value =""; 
return false; 
} 
} 
</script> 
</head> 
<body> 
<input type="file" name="contractFileName" style="width: 500px;" onchange="fileChange(this);"/> 
</body> 
</html>
Javascript 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
jquery 笔记 事件
Nov 02 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
JS实现4位随机验证码
Oct 19 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 #Javascript
使用js简单实现了tree树菜单
Nov 20 #Javascript
js 用CreateElement动态创建标签示例
Nov 20 #Javascript
JS实现字体选色板实例代码
Nov 20 #Javascript
jquery实现树形二级菜单实例代码
Nov 20 #Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 #Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 #Javascript
You might like
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP实现图片压缩
2020/09/09 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
Python交换变量
2008/09/06 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
pandas参数设置的实用小技巧
2020/08/23 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
SQL SERVER面试资料
2013/03/30 面试题
毕业生的自我评价范文
2013/12/31 职场文书
认识深刻的检讨书
2014/02/16 职场文书
小学生常见病防治方案
2014/06/06 职场文书
合伙经营协议书范本
2014/09/13 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
致运动员赞词
2015/07/22 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android