图片上传，本地预览

在IE7，IE8，firefox 3.5.2上 测试通过

在网上找了好久都没有找到一个能在ie和火狐上同时又用的例子：然后自己在网上东拼西凑，终于算是实现了功能

 

以下是代码

 

*.aspx

 

<%@ Register assembly="AjaxFileUploadHelper" namespace="Jeffz.Web" tagprefix="cc1" %>

 

<style type="text/css">
       
        #newPreview
    {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    }
       
        #txtareaRemark
        {
            width: 348px;
            height: 71px;
        }
       
    </style>

 

<script>

var picPath;
        var image;
        // preview picture
        function preview() {

            if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                document.getElementById('imgDraft').style.display = 'none';
                var newPreview = document.getElementById("newPreview");
              
                newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picPath;
                newPreview.style.width = "240px";
                newPreview.style.height = "300px";
            }
            //firefox
            else if (window.navigator.userAgent.indexOf("Firefox") >= 1)
            {
                document.getElementById('newPreview').innerHTML = "<img width='240' height='300' id='aPic' src='" + picPath + "'>";
            }
       
            //document.getElementById('preview').style.display = 'none';
            // 下面代码用来获得图片尺寸，这样才能在IE下正常显示图片
            //            alert("");
            //新的预览代码，支持 IE6、IE7。
           
//           
          
            $get("hfDeleted").value = "0";
        }


        // show view button
        function buttonShow() {
            /*
            这里用来解决图片加载延时造成的预览失败.
            简单说明一下，当image对象的src属性发生改变时JavaScript会重新给image装载图片内容，
            这通常是需要一些时间的，如果在加载完成之前想将图片显示出来就会造成错误，所以我们
            通过图片的宽度和高度来判断图片是否已经被成功加载，加载完毕才会显示预览按钮.
            这里我仍然有一个困惑，在IE7下预览效果偶尔会失效.
            */
            if (image.width == 0 || image.height == 0) {
                setTimeout(buttonShow, 1000);
            } else {
                document.getElementById('preview').style.display = 'block';
            }
        }
        function loadImage(ele) {
            picPath = getPath(ele);
            image = new Image();
            image.src = picPath;
           // setTimeout(buttonShow, 1000);

            preview();
        }

       
        function getPath(obj) {
            if (obj) {
                //ie
                if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                    obj.select();
                    // IE下取得图片的本地路径
                    return document.selection.createRange().text;
                }
                //firefox
                else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                    if (obj.files) {
                        // Firefox下取得的是图片的数据
                        return obj.files.item(0).getAsDataURL();
                    }
                    return obj.value;
                }
                return obj.value;
            }
        }

 

//图片删除
        function f_deleteDraft() {
            picPath = src = '/images/no1.jpg';
            if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
                document.getElementById('imgDraft').style.display = 'none';
                var newPreview = document.getElementById("newPreview");

                newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picPath;
                newPreview.style.width = "240px";
                newPreview.style.height = "300px";
            }
            //firefox
            else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
                document.getElementById('newPreview').innerHTML = "<img width='240' height='300' id='aPic' src='" + picPath + "'>";
            }    

            $get("hfDeleted").value = "1";
            var file = $get("fuImgBrowser");
            clearFileInput(file);
        }
        //清空upload控件内容操作
        function clearFileInput(file) {
            var form = document.createElement('form');
            document.body.appendChild(form);
            var pos = file.nextSibling;
            form.appendChild(file);
            form.reset();
            pos.parentNode.insertBefore(file, pos);
            document.body.removeChild(form);
        }
       
    </script>

 

 

 <div id='newPreview'style="width:296px; height:300px; border:1px #ccc solid;">
                <a id="hrefphoto" runat="server" target="_blank" >
                <asp:Image ImageUrl="../images/no1.jpg" ID="imgDraft"  runat="server" Width="240" />
                </a>
                </div>
                <%--<input type="file" name="pic" id="pic" οnchange='loadImage(this)' />--%>
                <asp:FileUpload ID="fuImgBrowser" οnchange="loadImage(this);" runat="server"
                                                             οnpaste="return false" Width="194px"/>
                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <input id="preview" type="button" value="删除"  runat="server" class=button οnclick="f_deleteDraft();return false;" />

 

 

*.aspx.cs

 

//图片从数据库里加载显示
            if (buyinf.Draft == null)
            {
                this.imgDraft.ImageUrl = "/images/no1.jpg";
            }
            else
            {

                this.imgDraft.ImageUrl = "ShowBuyPhoto.aspx?code=" + buyinf.Code;
                hrefphoto.HRef = "Showphoto.aspx?code=" + buyinf.Code;
            }

 

 //图片的保存
                if (hfDeleted.Value == "0" && fuImgBrowser.HasFile && fuImgBrowser.PostedFile.ContentLength > 0)
                {
                    //获取上传的文件名
                    string fileName = fuImgBrowser.PostedFile.FileName;
                    //图象文件临时储存Byte数组
                    byte[] imgdata = null;
                    string imgtype = "";
                    //建立数据流对像
                    Stream imgdatastream = fuImgBrowser.PostedFile.InputStream;
                    int imgdatalen = fuImgBrowser.PostedFile.ContentLength;
                    imgtype = fuImgBrowser.PostedFile.ContentType;
                    imgdata = new byte[imgdatalen];
                    //读取图象文件数据
                    imgdatastream.Read(imgdata, 0, imgdatalen);
                    buyinf.Draft = imgdata;//照片
                }
                else if (hfDeleted.Value == "1")
                {
                    buyinf.Draft = null;//照片
                }

 

 

由于时间比较紧，所以实现了功能就没有再去优化