磨刀不误砍柴工

合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。
   ::  ::  ::  :: 管理
IE7安全限制问题

在项目中，有上传本地图片先预览的功能。原先在本机IE6，IE7浏览器中可正常预览的功能，但在将项目布暑到远程服务器的时候，在IE7中不能预览了。此问题，在之前同事的IE7访问我机子预览时也出现过，当时没在意，认为系统不会有问题。

今天，上网找了许久，终于知道了，这原来是IE7中加强了安全限制。通过http访问的页面默认是没有访问用户本机图片文件的权限的，所以通过javascript获取不了本机的图片路径等相关信息。网上也有几种解决方案，一种是通过利用style的"DXImageTransform.Microsoft.AlphaImageLoader" 滤镜来实现，而另一种，则是设置当前站点为安全站点即可。

由于，预览还涉及到图片旋转等，利用"DXImageTransform.Microsoft.AlphaImageLoader"方式，确不知道该如何旋转此滤镜中的图片，故暂时决定采用设置安全性方式，有劳用户了。

一些莫名其妙的错误都是有源头的。

收集的资料贴出来：

在IE6.0中，用户可以在javascript中或许最终用户本地图片的长宽：

  1. <Script language=Javascript>
  2. function getLocalImageInfo( imgUrl )
  3. {
  4. var objImg = new Image();
  5. objImg.src = imgUrl;
  6. alert( objImg.width ) //the width of the local image
  7. alert( objImg.height ) //the height of the local image
  8. }
  9. //调用如下
  10. getLocalImageInfo( "file://c:\1.jpg" );
  11. </Script>

并且，在IE6.0中，在客户端本地上传图片前可以通过Javascript/html预览要上传的图片，并获取图片的文件大小：


  1. < html >
  2. < head >
  3. < title > Upload file </ title >
  4. </ head >
  5. < body >
  6. < input type = "file" onchange = "javascript:previewImage(this.value)" >
  7. < img id = "img" />
  8. < script language = "javascrtip" >
  9. function previewImage( imgUrl )
  10. {
  11. var objImg = document .getElementById("img");
  12. objImg.src = imgUrl ;
  13. alert( "the size of the image file:" + objImg.fileSize )
  14. }
  15. </ script >
  16. </ body >
  17. </ html >

Note: 上面的代码最好在img图片加载完毕后再取图片的大小，例如：objImg.onreadystatechange()=function{ if(objImg.readystate=="complete")............}

当在IE7中，如果上述代码放在客户机本机（以html的形式放在客户机器上，而不是放在IIS中通过http访问）以文件方式打开时仍然能实现IE6中的功能，但如果上述代码放在IIS中，用IE7 通过HTTP协议访问则不能正常工作。

经过查找资料才发现IE7在安全性方面做了提升，通过http访问的页面默认是没有访问用户本机图片文件的权限的，所以通过javascript获取不了本机的图片长宽，也不能将本机图片地址赋值给<img>对象。如果将所访问的站点放入"可信站点"列表中（IE7->工具->Internet选项->安全->可信站点），则可以如IE6一样正常工作。

如果不想通过客户将本站点设置为"可信"站点的方式来实现上传图片的预览及获取图片长宽信息，则可以利用style的"DXImageTransform.Microsoft.AlphaImageLoader" 滤镜来实现：


  1. < html >
  2. < head id = "Head1" runat = "server" >
  3. < title > Untitled Page </ title >
  4. < script language = javascript >
  5. function setImagePreview( fileUrl )
  6. {
  7. var objDivFilter = document .getElementById("divFilter")
  8. if( fileUrl )
  9. {
  10. objDivFilter.style.width = "400px" ;
  11. objDivFilter.style.height = "400px" ; //这个设置初始大小是必须的
  12. objDivFilter.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = image)" ;
  13. objDivFilter.filters.item("DXImageTransform.Microsoft.AlphaImageLoader") .src = fileUrl ;
  14. // get width and height
  15. alert( objDivFilter.offsetWidth)
  16. alert( objDivFilter.offsetHeight)
  17. }
  18. }
  19. </ script >
  20. </ head >
  21. < body >
  22. < form id = "form1" runat = "server" >
  23. < div >
  24. < asp:FileUpload ID = "txtFile" runat = "server" Width = "508px" onchange = "javascript:setImagePreview( this.value );" />
  25. < br />
  26. < div id = "divFilter" />
  27. </ div >
  28. </ form >
  29. </ body >

    但上述办法还不能在客户端获取图片文件的大小，我也没有找到很好的解决方案。

    另外：在.net中，可以在C#后台代码中获取图片的相应信息，只不过这种方式增加了一些不必要的网络传输过程，有一定的性能代价。

  30. 资料二：

  31. 本地图片预览代码（支持 IE6、IE7）

    在 IE6 中，可以很方便地利用 img 的 src 属性，实现本地图片预览，然而在 IE7 中，这种办法却行不通。需要用 AlphaImageLoader。

    AlphaImageLoader

    说明：

    在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。

    语法：

    filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

    enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
    true：默认值。滤镜激活。
    false：滤镜被禁止。

    sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
    crop：剪切图片以适应对象尺寸。
    image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
    scale：缩放图片以适应对象的尺寸边界。

    src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

    具体操作：

    1. 为预览区域（比如要在某个 div 中预览）添加样式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
    2. 为 AlphaImageLoader 设置 src 属性。

    示例代码：


    [Ctrl+A 全部选择 提示：您可先修改部分代码，再按运行]

    相关阅读：http://www.cftea.com/products/ 很好的学习地方

posted on 2008-09-22 14:23 liwei5891 阅读(910) 评论(0)  编辑  收藏 所属分类: Others

只有注册用户登录后才能发表评论。
网站导航: