客户端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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
Javascript window对象详解
Nov 12 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
JavaScript页面加载事件实例讲解
Sep 01 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
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
Destoon实现多表查询示例
2014/08/21 PHP
jquery插件之easing使用
2010/08/19 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
jQuery事件详解
2017/02/23 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
新学期班主任寄语
2014/01/18 职场文书
大学班长的职责
2014/01/27 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2014年保育员工作总结
2014/12/02 职场文书
人事专员岗位职责
2015/02/03 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书