客户端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:以前写的xmlhttp池,代码
May 18 Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
vue实现固定位置显示功能
May 30 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
js实现圆形显示鼠标单击位置
Feb 11 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实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python获取一组汉字拼音首字母的方法
2015/07/01 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python文件读写常见用法总结
2019/02/22 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
房产委托公证书
2014/04/08 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
KVM基础命令详解
2022/04/30 Servers