客户端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 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
javascript去除空格方法小结
May 21 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
Node.js console控制台简单用法分析
Jan 04 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中的cookie不用刷新就生效的方法
2012/02/04 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
vue实现评价星星功能
2020/06/30 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python给你的头像加上圣诞帽
2018/01/04 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
计算机专业毕业生求职信分享
2013/12/24 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
读书之星事迹材料
2014/05/12 职场文书
付款承诺函范文
2015/01/21 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js