预览本地图片 （支持ie,firefox）, safari的有人帮忙解决一下？

最近，工作上需要上传预览本地图片，所以，写了一个，当时遇到ie7的一个比较特殊的问题

IE7需要用到DXImageTransform.Microsoft.AlphaImageLoader来解决，但是这个又有一个问题，

我对滤镜不熟悉，不知道怎么控制大小，所以，只能用多层div来解决这个问题，

这个效果达到了工作的目的

/*
* 函数名称: ViewImage
* 作    者: yithcn
* 功能说明: 预览图片，文字类描述
* 使用说明: var view = new ViewImage(null,null, 600, 350);
*           view.view(null, src, 'View Image');
* 创建日期: 2010.10.12
*/

//tab 目前没有用到

//dest 目标位置，可为空

//viewtype 文字性的内容还是图片
function ViewImage(tab, dest, width, height, viewtype) {
    this.construct(tab, dest, width, height, viewtype);
};

//属性

ViewImage.prototype.closeBtnImage = "button_close.gif";
ViewImage.prototype.width = 400;
ViewImage.prototype.height = 400;
ViewImage.prototype.key = new Date().getMilliseconds();
ViewImage.prototype.tab = null;
ViewImage.prototype.bgdiv = null;
ViewImage.prototype.viewdiv = null;
ViewImage.prototype.info = null;
ViewImage.prototype.image = null;
ViewImage.prototype.closeBtn = null;
ViewImage.prototype.title = null;
ViewImage.prototype.zIndex = 1000;
ViewImage.prototype.btnTop = 0;
ViewImage.prototype.viewType = "img";
ViewImage.prototype.dest = null;
ViewImage.prototype.bgCssText = "display: none; position: absolute; background-color: Gray; filter: alpha(opacity=30); -moz-opacity: 0.4; opacity: 0.4; width: 100%;";

//初始化属性

ViewImage.prototype.construct = function(tab, dest, width, height, viewtype) {
    this.width = width ? (width > document.body.clientWidth ? document.body.clientWidth : width) : this.width;
    this.height = height ? (height > document.body.clientHeight ? document.body.clientHeight : height) - 30 : this.height;
    this.tab = tab || null;
    this.viewType = viewtype || this.viewType;
    if (typeof dest == "string")
        dest = document.getElementById(dest);
    this.dest = dest;
};

//创建一定的html代码，如果dest存在就不创建

ViewImage.prototype.buildHTML = function() {
    var that = this;
    var html = '<div id="bgdiv_' + that.key + '" style="z-index: ' + that.zIndex + ';"></div>';
    html += '<div id="viewdiv_' + that.key + '" style="position: absolute; display: none; width: ' + that.width + '; z-index: ' + (that.zIndex + 1) + ';">';
    html += '<div style="background-color:#6D84B4;padding:0px 5px;line-font-family:verdana, arial, helvetica; font-size:12px;">';
    html += '<div style="width:88%;float:left;text-align:left;"><font color="White"><span id="span_title_' + that.key + '"></span></font></div>';
    html += '<div style="width:12%;float:right;text-align:right;padding:6px 0px;"><img id="but_close_' + that.key + '" src="' + that.closeBtnImage + '"></div>';
    html += '</div>';
    html += '<div id="info_' + that.key + '" style="text-align:center;background-color:#ffffff;overflow:auto;width: ' + that.width + '; "></div>';
    html += '</div>';
    return html;
};

//隐藏

ViewImage.prototype.hide = function() {
    this.bgdiv.style.display = 'none';
    this.viewdiv.style.display = 'none';
    this.setOverflow("auto");
};

//生成html之类的

ViewImage.prototype.create = function(src, title) {
    var that = this;
    if (!that.dest) {
        if (!document.getElementById("body_div_temp_")) {
            var div = document.createElement("div");
            div.id = "body_div_temp_";
            div.innerHTML = that.buildHTML();
            document.body.appendChild(div);
        }
        that.bgdiv = document.getElementById("bgdiv_" + that.key);
        that.viewdiv = document.getElementById("viewdiv_" + that.key);
        that.closeBtn = document.getElementById("but_close_" + that.key);
        that.title = document.getElementById("span_title_" + that.key);
        that.bgdiv.style.cssText += that.bgCssText;
        title = title || "View Image";
        that.title.innerHTML = title;
        that.info = document.getElementById("info_" + that.key);
    }
    else {
        that.info = that.dest;
    }
    that.info.innerHTML = "";
    if (that.viewType == "img") {
        var ie = parseInt(that.sys());

//ie7特殊处理
        if (ie == 7) {
            that.info.innerHTML = '<div id="xDiv" style="width:100px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\',sizingMethod=\'image\');"></div>';
        }
        else {
            var img = document.createElement('img');
            img.src = src;
            that.image = img;
            that.info.insertBefore(img, null);
        }
    }
    else {
        that.info.style.textAlign = "left";
        that.info.innerHTML = src;
    }
};

//获取ie版本

ViewImage.prototype.sys = function() {
    var ua = navigator.userAgent.toLowerCase();
    var s = ua.match(/msie ([\d.]+)/);
    return s ? s[1] : -1;
};

//计算显示窗口的位置，当图片很大的时候，自动适应满屏

ViewImage.prototype.setWH = function() {
    var that = this;
    that.bgdiv.style.top = 0;
    that.bgdiv.style.left = 0;
    that.bgdiv.style.display = '';
    that.viewdiv.style.display = '';

    var height = parseInt(document.body.scrollHeight < document.body.clientHeight ? document.body.clientHeight : document.body.scrollHeight);
    that.bgdiv.style.height = height;

    if (that.image && that.image.width > that.width) {
        var w = (that.image.width > document.body.clientWidth ? document.body.clientWidth : that.image.width) - 40;
        that.viewdiv.style.width = w;
        that.info.style.width = w;
    }
    else {
        that.viewdiv.style.width = that.width;
        that.info.style.width = that.width;
    }
    if (that.image && that.image.height > that.height) {
        var h = (that.image.height > document.body.clientHeight ? document.body.clientHeight : that.image.height) - 50;
        that.viewdiv.style.height = h;
        that.info.style.height = h;
    }
    else {
        that.viewdiv.style.height = that.height;
        that.info.style.height = that.height;
    }

    var top = 0;
    if (that.btnTop < parseInt(that.viewdiv.style.height)) {
        top = parseInt(document.body.clientHeight / 2 - parseInt(that.viewdiv.style.height) / 2) - 15;
    }
    else {
        top = that.btnTop - (that.btnTop - document.body.scrollTop);
        var top1 = parseInt(document.body.clientHeight / 2 - parseInt(that.viewdiv.style.height) / 2) - 15;
        top += top1;
    }
    that.viewdiv.style.top = top;

    var left = parseInt(document.body.clientWidth / 2 - parseInt(that.viewdiv.style.width) / 2);
    that.viewdiv.style.left = left;
};

//隐藏滚动条

ViewImage.prototype.setOverflow = function(type) {
    document.body.style.overflow = type;
};

//获取点击位置

ViewImage.prototype.getPos = function(e) {
    if (e) {
        var t = e.offsetTop;
        var l = e.offsetLeft;
        var height = e.offsetHeight;
        while (e = e.offsetParent) {
            t += e.offsetTop;
            l += e.offsetLeft;
        }
        this.btnTop = t;
    }
};

//显示

ViewImage.prototype.view = function(btn, src, title) {
    var that = this;
    that.setOverflow("hidden");
    that.getPos(btn);
    that.create(src, title);
    if (!that.dest) {
        setTimeout(function() { that.setWH(); }, 0);
        var fn = function() { that.hide(); };
        if (that.closeBtn.addEventListener) {
            that.closeBtn.addEventListener('click', fn, false);
        }
        else if (that.closeBtn.attachEvent) {
            that.closeBtn.attachEvent('onclick', fn);
        }
    }
};

 网盘下载:http://www.yithcn.com/u/pickupfile.htm?fileid=361c6e11f948