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

更新时间：2009年08月01日 13:24:47 作者：

在做上传图片的时候，如果不限制上传图片大小，后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢？

需求分析：
在做上传图片的时候，如果不限制上传图片大小，后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢？有两种方式：
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); 
} 
}&nbsp;

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">&nbsp;</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>

您可能感兴趣的文章:

如何快速解决JS或Jquery ajax异步跨域的问题
如何快速解决JS或Jquery ajax异步跨域的问题呢？下面小编就为大家分享一篇快速解决Jquery ajax异步跨域问题的方法，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
jquery实现的table排序功能示例
这篇文章主要介绍了jquery实现的table排序功能,涉及基于jQuery的页面元素属性动态操作及鼠标事件响应相关技巧,需要的朋友可以参考下
2017-03-03
EasyUI框架使用Ajax提交注册信息的实现代码
这篇文章主要介绍了EasyUI框架使用Ajax提交注册信息的实现代码的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
2017-09-09
jQuery实现首页图片淡入淡出效果的方法
这篇文章主要介绍了jQuery实现首页图片淡入淡出效果的方法,实例分析了jQuery图片淡入淡出效果的相关使用技巧,需要的朋友可以参考下
2015-06-06
Jquery validation remote 验证的缓存问题解决方法
这篇文章主要介绍了Jquery validation remote 验证的缓存问题的解决方法 ,需要的朋友可以参考下
2014-03-03
简洁Ajax函数处理(示例代码)
Ajax是前后端交互经常用的，虽然jQuery疯狂ajax处理函数 $.post(), $.get(); $.ajax()已经大大的简化了ajax的函数处理，但我们可以更加精益求精
2013-11-11
使用jQuery实现返回顶部
博客园是程序员们比较喜欢的聚集地，很多人喜欢发发心得，一直都觉着挺好的，但最不满意他的一点是，没有返回到顶部的功能，好吧，我们自己来添。
2015-01-01
jQuery自动添加表单项的方法
这篇文章主要介绍了jQuery自动添加表单项的方法,涉及jquery中append方法动态添加表单元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
30个让人兴奋的视差滚动（Parallax Scrolling）效果网站
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。今天这篇文章就与大家分享30个视差滚动效果的网页设计作品，一起欣赏（以拖动滚动条方式浏览效果更佳）
2012-03-03
jquery+css+html实现飞机大战游戏
这篇文章主要为大家详细介绍了jquery+css+html实现飞机大战游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05