做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况，下面就这个问题我们一种如何使用js处理这个问题的方法，具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理，js处理图片主要是利用javascript中Image对象，通过 onload 事件和 onreadystatechange 来进行判断。

（1）第一中方法，通过onload事件，比如：

<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
	alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);
	document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>

（2）第二种方法，使用 onreadystatechange 来判断

<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onreadystatechange=function(){
	if(this.readyState=="complete"){
		alert('图片的宽度为：'+obj.width+'；图片的高度为：'+obj.height);
		document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
	}
}
</script>
<div id="mypic">onloading……</div>

• JS 判断图片是否加载完毕
• JQuery判断图片是否加载失败
• JavaScript图片预加载技术
• JS加载所有图片资源，加载完毕再进行后续动作
• JS动态加载以及确定加载完成
• JS判断变量是否定义
• PHP如何判断一个gif图片是否为动态图片(动画)
• JS异步加载文件