关于Web中的图片预览 IE6 IE7

以前我们开发上传图片程序的时候　有时候也会用到预览功能
在IE6的时代　，我们只需要在file控件onchange的时候将value赋值给一个
img对象的src属性就可以了，本地图片前面可以加上"localhost://"
但是在IE7的时代，这样的做法目前是行不通了．但是可以通过以下方式实现：

  1ImagesList.prototype={
  2        initialize:function(m,s,cs,es)
  3        {
  4            this.MutImg = new FunctionImage(m,"mutimg");//多色大图
  5            this.SpeImg = new FunctionImage(s,"speimg");//特效图片
  6            this.CnImg = new FunctionImage(cs,"cnimg");//中文促销
  7            this.EnImg = new FunctionImage(es,"enimg");//英文促销
  8            this.HtmlContainer = $("attachmentTd");//
  9            this.ControlBar = $("abaseImg");
 10            this.RowMaxLength = 9;
 11            this.NormalImgCount = 0;
 12            this.BtnS = "上传基本图片";
 13            this.BtnM = "上传更多基本图片";
 14            this.items = [];
 15            this.Nimg = null;
 16        },
 17        find:function(img,value)
 18        {
 19            var _img = null;
 20            function it(v,i)
 21            {
 22                if(v.colorid==(img.colorid || img) && -1!=(img.colorid || img))
 23                {
 24                    _img = value?v:i;
 25                    return _img;
 26                }
 27            }
 28            this.items.each(it);
 29            return _img;
 30        },
 31        add:function()
 32        {
 33            ImageHelper.upload();
 34        },
 35        appendItem:function()
 36        {
 37           this.Nimg = new NormalImage();
 38           this.Nimg.load();
 39            var tempImg = this.find(this.Nimg,true);
 40            if(this.items.length ==0 || !tempImg)
 41            {
 42                this.items.push(this.Nimg);
 43                this.ControlBar.disabled = true;
 44                var temp = this.NormalImgCount;
 45                if(this.HtmlContainer.rows(this.HtmlContainer.rows.length-1).cells.length==this.RowMaxLength)
 46                {
 47                     this.HtmlContainer.insertRow(-1);
 48                }
 49                var row = this.HtmlContainer.rows(this.HtmlContainer.rows.length-1);
 50                var RowIndex = this.HtmlContainer.rows.length-1;
 51                var CellIndex = row.cells.length;
 52                var obj =  row.insertCell(-1);
 53                obj.id = this.Nimg.colorid+'_d'; 
 54                //<img src='file://localhost/"+this.Nimg.path+"' id='img_"+this.Nimg.colorid+"' class='imgsmall' alt='单击图片查看原图' title='单击图片查看原图'/><label style='font:bold' id='lab"+this.Nimg.colorid+"'></label>
 55                obj.innerHTML = "<div class='newPreview' id='img_"+this.Nimg.colorid+"'></div><div><div style='float:left' title='删除图片'><a href=\"javascript:void(null)\" style=\"width:70;\"   onMouseOver=\"this.uid='1'\" onMouseOut=\"this.uid='-1'\" onClick='_ImagesList.del()' uid=\"-1\" id='imgdelctrl_"+this.Nimg.colorid+"' sid='"+this.Nimg.colorid+"' style='"+this.Nimg.styletext+"'>删除</a></div><div style='float:right' title='修改图片'><a  href=\"javascript:Goto();\" onclick='ImageHelper.autoMod("+this.Nimg.colorid+")'>"+this.Nimg.colortext+"</a></div></div>";
 56                var s = "file://localhost/"+this.Nimg.path;
 57                var o = $("img_"+this.Nimg.colorid);
 58                o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = s;
 59                this.ControlBar.disabled=false;
 60                this.NormalImgCount++;
 61                if(this.NormalImgCount!=0)
 62                {
 63                    this.ControlBar.innerText = this.BtnM;
 64                }
 65            }
 66            else
 67            {
 68                tempImg.changePath();
 69            }
 70        },
 71        del:function()
 72        {
 73            if(window.confirm("是否确认删除该颜色图片？"))
 74            {
 75                var e = event.srcElement;
 76                var index = this.find(e.sid,false);
 77                var cindex;
 78                var rindex;
 79                if(index!=null && this.items.length)
 80                {
 81                    var temp = this.items[this.items.length-1];
 82                    this.items[index] = temp;
 83                    this.items.pop();
 84                }
 85                while(e.tagName!="TD")
 86                {
 87                    e = e.parentElement;
 88                }
 89                cindex = e.cellIndex;
 90                while(e.tagName!="TR")
 91                {
 92                    e = e.parentElement;
 93                }
 94                rindex = e.rowIndex;
 95                this.HtmlContainer.rows(rindex).deleteCell(cindex);
 96                this.removePosition(rindex);
 97                if(this.items.length==0)
 98                {
 99                    this.ControlBar.innerText = this.BtnS;
100                }
101                //this.resetFieldCon();
102            }
103        },
104        removePosition:function(rindex)
105        {
106            if(this.HtmlContainer.rows(rindex+1))
107            {
108                if(this.HtmlContainer.rows(rindex+1).cells(0))
109                {
110                    this.HtmlContainer.rows(rindex).insertCell(-1).innerHTML=this.HtmlContainer.rows(rindex+1).cells(0).innerHTML;
111                    this.HtmlContainer.rows(rindex+1).deleteCell(0);
112                }
113                else
114                {
115                    this.HtmlContainer.deleteRow(rindex+1);
116                }
117                this.removePosition(rindex+1);
118            }
119            
120        },
121        resetFieldCon:function()
122        {
123            //this.ConSourceContain.innerHTML = '<input type="file" id="NFC" onchange="_ImagesList.add()" />';
124        },
125        load:function()
126        {
127            this.MutImg.load();//多色大图
128            this.SpeImg.load();//特效图片
129            this.CnImg.load();//中文促销
130            this.EnImg.load();//英文促销
131        }
132    }

注意分析上面的代码，就可以明白是通过一个div做容器，用滤镜的方式去实现的．
上面的代码是我一个项目中用到的，基于prototype1.4开发的，希望对大家有帮助．