客户端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 相关文章推荐
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
了解JavaScript中let语句
May 30 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
解决elementui表格操作列自适应列宽
Dec 28 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实现文件上传二法
2006/10/09 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
PHP守护进程实例
2015/03/06 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
物业客服专员岗位职责
2013/11/30 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
答谢词范文
2015/01/05 职场文书
颐和园的导游词
2015/01/30 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript