解决IE和FF下改变img的src后,获取图片高度和宽度问题

大家经常会使用到<img src="image/logo.gof" />

最重要的是上传时候为了能让上传的图片立马显示出来,所以会用<img />标签将图片显示出来!

但是上传的图片大大小小,非常不一致.

那我们就需要对齐设置高宽进行缩放.

下面介绍兼容IE和FF的获取图片高宽的办法:

第一步,声明全局image对象

 

var img = new Image();

 

这个是为了能够让脚本可以只对一个Image对象进行处理,而且也是兼容IE和FF的必备步骤!

 

第二步,我们要初始化这个Image对象

 

function initImage(){
    //兼容 IE 和 FF 的设置图片
    img.onload = function() {
        dealImg(flag);
    }
    img.onerror = function() {
        alert("图片损坏！");
    }
    //onLoad的时候,地下一行注释解掉,如果是从changeImage()函数调用过来的,保持注释!
    //img.src=  "/image/logo.gif";
}

以上为封装的初始化函数,需要在页面onLoad的时候去加载,或者在上传控件的值改变时去加载:例如

 

 

<input id="txtUploadFile" type="file" onchange="changeImage()" />

那么上传控件值改变的时候,如何去设置图片的Src呢,而且还要兼容IE和FF,请看以下函数

 

 

function changeImage() {
    //如果在页面onLoad的时候没有调用initImage(),那么这里就需要调用了
    initImage();
    var isIE = (document.all) ? true : false;
    if(isIE) {
        img.src = document.getElementById("txtUploadFile").value;
    } else {
        //FF 获取本地图片地址的方法
        img.src = document.getElementById("txtUploadFile").files[0].getAsDataURL();
    }
}

这个时候我们就可以去调用图片的高度和宽度了

 

 

var w=img.width;
var h=img.height;

好了,下面要进行什么特殊处理,就看各位大侠的发挥了

 

转载请保留本文地址: http://blog.csdn.net/yakson/article/details/7978433