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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
js取模(求余数)隔行变色
May 15 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
js实现文字选中分享功能
Jan 25 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
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
PHP中的类-什么叫类
2006/11/20 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php源码的使用方法讲解
2019/09/26 PHP
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
js实现漫天星星效果
2017/01/19 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
pandas series序列转化为星期几的实例
2018/04/11 Python
python游戏地图最短路径求解
2019/01/16 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Python 转换文本编码实现解析
2019/08/27 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python pandas库中的isnull()详解
2019/12/26 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
linux系统都有哪些运行级别
2012/04/15 面试题
中英文自我评价语句
2013/12/20 职场文书
办公室经理岗位职责
2014/01/01 职场文书
大学生应聘求职信
2014/05/26 职场文书
社区重阳节活动总结
2015/03/24 职场文书
爱心捐助活动总结
2015/05/09 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL