上传照片实现记录（3）——IE安全性问题

    作者： 李东龙

   

     就上传照片功能又有了新的问题，照片在IE7、IE8上不显示。

      之前一直用的都是搜狗浏览器，照片显示正常，代码如下：  

function SelectPhoto() {
    //背景
    var bgObj = document.getElementById("bgDiv");
    bgObj.style.width = "1500px";
    bgObj.style.height = screen.height + "px";
//定义窗口
var msgObj = document.getElementById("msgDiv");
    msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";
    //关闭
    document.getElementById("msgShut").onclick = function () {
        bgObj.style.display = msgObj.style.display = "none";
    }
    msgObj.style.display = bgObj.style.display = "block";
    var fd = new ActiveXObject("MSComDlg.CommonDialog");
    fd.Filter = "图像文件 (*.jpg;*.jpeg;*.gif)|*.jpg;*.jpeg;*.gif";
    fd.FilterIndex = 2;

    // 必须设置MaxFileSize. 否则出错
    fd.MaxFileSize = 128;
    fd.ShowOpen();
    
    document.getElementById("ContentPlaceHolder2_txtFileName").value = fd.Filename;
    document.getElementById("ContentPlaceHolder2_image1").src= fd.FileName;
}

      这个js的函数通过前面的ActiveXObject("MSComDlg.CommonDialog")选择照片。下面通过image1的src获得照片进行显示。在搜狗、ie6中显示都没有问题。

      其实之前document.getElementById("ContentPlaceHolder2_image1").src= fd.FileName;这句代码不是这么写的，是document.getElementById("image1").src= fd.FileName;这样写就显示不出来了，在之前的工程中也遇到过这样的问题，就很自然的打开ie的开发人员工具，找到了image1的实际ID"ContentPlaceHolder2_image1"，这里的"ContentPlaceHolder2"是母版页留下的可操作空间，母版页的前台的部分代码如下：

      ……  ……
                    <a href="#">退出登录</a>
                </th>
            </tr>
        </table>
    </div>
    <div id="FrontMain">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        </asp:ContentPlaceHolder>
    </div>
      ……  ……

       具体为什么没有找到答案，还望大家给我讲一讲。言归正传，还说我们的ie安全性问题。刚发现这个问题的时候都不知道是什么原因，找了很多资料也没有得到正解（原因是对该问题的认识不够，不知道应该从哪个方面入手）。最后终于问题描述清楚了，人家说是IE7、IE8的安全性高，是不允许用绝对路径直接显示图片的。

      哦，哈哈！终于找到你了！http://hi.baidu.com/flesh666/blog/item/3185794539806421cffca310.html

     里面提到了三种方法：

第一种是修改IE安全性，此方法我感觉行不通，那人家每次用你的系统还得修改浏览器安全性啊？

第二种叫什么“曲线救国”，没有看懂，他也说是最麻烦的方法。

第三种是先将照片copy到服务器上然后用相对路径显示。个人感觉着个方法还行，但是不会啊。然后又开始了查找，在此也发现了自己学习方法的一些问题。将在下片博客中进行阐述。

    过程就不说了，还是从网上找到了一些其他的方法，尝试了几个也没有实现，最后的实现方法如下：   

//<前台>

   <div id="PreviewImg"></div> 

//<js函数> 
   function SaveAs5(imgURL) {  
       var newPreview = document.getElementById("PreviewImg");  
       newPreview.innerHTML = "";  
       newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgURL;  
       newPreview.style.width = "235px";  
       newPreview.style.height = "305px";
   }

          这样无论是IE几都可以显示，松了一口气啊！