客户端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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
javascript第一课
Feb 27 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 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
第九节--绑定
2006/11/16 PHP
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
php笔记之常用文件操作
2010/10/12 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jquery 笔记 事件
2011/11/02 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
Python转码问题的解决方法
2008/10/07 Python
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
专升本自我鉴定
2013/10/10 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
大气污染防治方案
2014/05/19 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
Python内置的数据类型及使用方法
2022/04/13 Python