客户端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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
玩转图像函数库―常见图形操作
2006/09/03 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
js实现录音上传功能
2019/11/22 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
linux 下实现python多版本安装实践
2014/11/18 Python
python中list列表的高级函数
2016/05/17 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
什么是Python变量作用域
2020/06/03 Python
学python最电脑配置有要求么
2020/07/05 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
海外淘书首选:AbeBooks
2017/07/31 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
新学期开学寄语
2014/01/18 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
竞选学委演讲稿
2014/09/13 职场文书
单位委托书
2014/10/15 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
布达拉宫的导游词
2015/02/02 职场文书
学习雷锋主题班会
2015/08/14 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS