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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
js数组的操作详解
Mar 27 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
angularJS 入门基础
Feb 09 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
vue-i18n结合Element-ui的配置方法
May 20 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 文件上传类代码
2011/08/06 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php不用正则验证真假身份证
2013/11/06 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
快速入手Python字符编码
2016/08/03 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
Django保护敏感信息的方法示例
2019/05/09 Python
PyQt5实现画布小程序
2020/05/30 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
servlet面试题
2012/08/20 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
入党自荐书范文
2014/03/09 职场文书
公司活动总结怎么写
2014/06/25 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
环境卫生标语
2015/08/03 职场文书