解决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" οnchange="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