Javascript 验证上传图片大小[客户端]


Posted in Javascript onAugust 01, 2009

需求分析:
在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式:
1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理。
2)前台处理: 也就是利用Javascript获取该图片大小。
显然第一种方式,很不好。因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本。
功能解析:
在这里我只介绍IE与FireFox两个浏览器的不同做法。
IE6:
关键字: fileSize onreadystatechange complete
在IE6中可以通过Img对象的fileSize 属性获得文件大小,但这个fileSize属性的正确值是建立在onreadystatechange 事件的complete 中,也就是

<img src="" class="img" 
onreadystatechange="Javascript:sizeCheck(this);"> 
function sizeCheck(img) { if(img.readyState == "complete") { 
alert(img.fileSize); 
} 
} 

FireFox3.0:
关键字: getAsDataURL() fileSize
在FireFox中处于安全的考虑,无法获得上传图片的完整路径,只能获得图片名称。但浏览器提供nsIDOMFile??右??接口,所以需要通过getAsDataURL()获得处理过后的路径,但该路径不影响图片src显示。
nsIDOMFile接口:
DOMString getAsBinary();
DOMString getAsDataURL();
DOMString getAsText(in DOMString encoding);
<input type="file" name="uploadImg" 
onchange="Javascript:checkFileChange(this);" 
size="12"/> 
function checkFileChange(obj) { 
var img = document.getElementById("img"); 
img.src = obj.files[0].getAsDataUrl(); 
alert(obj.files[0].fileSize); 
}

以上是两个不同浏览器的处理方式,那么怎么把他们融和到一起呢?我在下面会将我做的小例子贴出来,其中里面我使用JQuery,方便与获取对象。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="lib/jquery-1.3.2.min.js" ></script> 
<title>检查上传图片大小</title> 
<style type="text/css"> 
.img {width:136px;height:102px;} 
.imgError{border:3px solid red;} 
</style> 
<script type="text/javascript"> 
//限制上传图片大小100K 
var MAXSIZE = 100 * 1024; //图片大小限制信息 
var ERROR_IMGSIZE = "图片大小不能超过100K"; 
//默认图片 
var NOPHOTO = "imgs/nophoto.gif"; 
//图片是否合格 
var isImg = true; 
/** 
* Input file onchange事件 
* @params obj file对象 
* @return void 
**/ 
function checkFileChange(obj) { 
//初始化设置 
$(".imgTable").removeClass("imgError"); 
updateTips(""); 
var img = $(".img").get(0); 
var file = obj.value; 
var exp = /.\.jpg|.\.gif|.\.png|.\.bmp/i; 
if (exp.test(file)) {//验证格式 
if($.browser.msie) {//判断是否是IE 
img.src = file; 
} else { 
img.src = obj.files[0].getAsDataURL(); 
sizeCheck(img); 
} 
} else { 
img.src = NOPHOTO; 
$(".imgTable").addClass("imgError"); 
updateTips("图片格式不正确"); 
isImg = false; 
} 
} 
/** 
* sizeCheck 检查图片大小 
* @params img 图片对象 
* @return void 
**/ 
function sizeCheck(img) { 
//初始化设置 
$(".imgTable").removeClass("imgError"); 
updateTips(""); 
if ($.browser.msie) {//查看是否是IE 
if(img.readyState == "complete") { 
if (img.fileSize > MAXSIZE) { 
$(".imgTable").addClass("imgError"); 
updateTips(ERROR_IMGSIZE); 
isImg = false; 
}else { 
isImg = true; 
} 
}else { 
$(".imgTable").addClass("imgError"); 
updateTips(ERROR_IMGSIZE); 
isImg = false; 
} 
} else { 
var file = $("input:file[name='uploadImg']")[0]; 
if (file.files[0].fileSize > MAXSIZE) { 
$(".imgTable").addClass("imgError"); 
updateTips(ERROR_IMGSIZE); 
isImg = false; 
}else { 
isImg = true; 
} 
} 
} 
/** 
* updateTips 注册错误信息显示 
* @params str 显示内容 
* @return void 
**/ 
function updateTips(str) { 
$("p#errorTips").text(str); 
} 
/** 
* commit 注册提交 
* @return void 
**/ 
function commit() { 
var isCommit = true; 
var usrname = $("input:text[name='usrname']"), 
email = $("input:text[name='email']"), 
img = $(".img"), 
file = $("input:file[name='uploadImg']"), 
frm = document.frm; 
isCommit = isCommit && isImg; 
if(isCommit) { 
frm.action = "about:blank"; 
frm.submit(); 
} 
} 
/** 
* errorImg 图片错误显示 
* @params img 图片对象 
* @return void 
**/ 
function errorImg(img) { 
img.src = NOPHOTO; 
} 
</script> 
</head> 
<body> 
<form name="frm" method="post"> 
<p id="errorTips"> </p> 
<table cellpadding="1" cellspacing="0" width="350px" border="1"> 
<tr> 
<td><label>姓名:</label></td> 
<td><input type="text" name="usrname" maxlength="50"/></td> 
</tr> 
<tr> 
<td><label>性别:</label></td> 
<td><input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="0"/>女</td> 
</tr> 
<tr> 
<td><label>邮件:</label></td> 
<td><input type="text" name="email" maxlength="100"/></td> 
</tr> 
<tr> 
<td><lable>图像</label></td> 
<td> 
<table cellpadding="0" cellspacing="0" class="imgTable"> 
<tr> 
<td><img src="imgs/nophoto.gif" src="imgs/nophoto.gif" class="img" alt="头像" onerror="Javascript:errorImg(this);" 
onreadystatechange="Javascript:sizeCheck(this);"/> 
</td> 
</tr> 
<tr> 
<td><input type="file" name="uploadImg" onchange="Javascript:checkFileChange(this);" 
size="12"/></td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td colspan="2"><a href="Javascript:commit();" href="Javascript:commit();">注册</a></td> 
</tr> 
</table> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
js对数字的格式化使用说明
Jan 12 Javascript
理解javascript回调函数
Dec 28 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
js实现网页随机验证码
Oct 19 Javascript
Javascript 汉字字节判断
Aug 01 #Javascript
JS 面向对象的5钟写法
Jul 31 #Javascript
Document 对象的常用方法
Jul 31 #Javascript
javascript getElementsByName()的用法说明
Jul 31 #Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 #Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 #Javascript
JavaScript 创建对象和构造类实现代码
Jul 30 #Javascript
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
js滚动条多种样式,推荐
2007/02/05 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
SVG实现时钟效果
2018/07/17 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
Python实现处理管道的方法
2015/06/04 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Windows下python3.7安装教程
2018/07/31 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
行政助理的职责
2013/11/14 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
实习鉴定评语
2014/01/19 职场文书
高三自我评价
2014/02/01 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
市场营销计划书范文
2015/01/16 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
Python字符串的转义字符
2022/04/07 Python