客户上传图片将网页内容区撑破了,以下就这个问题提供一种如何使用js处理这个问题的方法。
具体思路:
在js判断客户端的图片下载完毕后,对该图片的宽度或高度做一些处理。
js处理图片主要是利用js中Image对象,通过 onload 事件和 onreadystatechange 来进行判断。
方法1,通过onload事件,例如:
复制代码 代码示例:
<script type="text/
javascript">
var obj=new Image();
obj.src="http://www.jb200.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.jb200.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获取图片宽高的代码
复制代码 代码示例:
<img src="" onload="alert(this.width);alert(this.height)">