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重载函数的辅助方法2
Jul 04 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 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
建立动态的WML站点(二)
2006/10/09 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python中的异常处理学习笔记
2015/01/28 Python
Python中的filter()函数的用法
2015/04/27 Python
python如何使用unittest测试接口
2018/04/04 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
英语专业毕业生自荐信范文
2013/12/31 职场文书
业务部经理岗位职责
2014/01/04 职场文书
项目合作协议书
2014/04/16 职场文书
车辆转让协议书
2014/09/24 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
redis限流的实际应用
2021/04/24 Redis