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 相关文章推荐
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
Vue获取微博授权URL代码实例
Nov 04 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
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python数据结构之Array用法实例
2014/10/09 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python批量赋值操作实例
2018/10/22 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
药学专业学生的自我评价分享
2014/02/06 职场文书
爱情保证书大全
2014/04/29 职场文书
人事专员岗位说明书
2014/07/29 职场文书
埃及王子观后感
2015/06/16 职场文书
2015国庆节宣传语
2015/07/14 职场文书
学校运动会开幕词
2016/03/03 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript