Javascript验证上传图片大小[前台处理]


Posted in Javascript onJuly 18, 2014

需求分析:

在做上传图片的时候,如果不限制上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式:
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();" rel="external nofollow" rel="external nofollow" href="Javascript:commit();" rel="external nofollow" rel="external nofollow" >注册</a></td> 
</tr> 
</table> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
javascript封装简单实现方法
Aug 11 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
js如何验证密码强度
Mar 18 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 #Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 #Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 #Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 #Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 #Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 #Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
基于php无限分类的深入理解
2013/06/02 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP 无限级分类
2017/05/04 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
python 实现多维数组(array)排序
2020/02/28 Python
Python中常用的os操作汇总
2020/11/05 Python
python openssl模块安装及用法
2020/12/06 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
地理科学专业毕业生求职信
2013/10/15 职场文书
建筑毕业生自我鉴定
2013/10/18 职场文书
教师年度考核评语
2014/04/28 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python