磨刀不誤砍柴工

合抱之木，生于毫末；九層之臺，起于累土；千里之行，始于足下。

:: :: :: :: 管理

在項目中，有上傳本地圖片先預覽的功能。原先在本機IE6，IE7瀏覽器中可正常預覽的功能，但在將項目布暑到遠程服務器的時候，在IE7中不能預覽了。此問題，在之前同事的IE7訪問我機子預覽時也出現過，當時沒在意，認為系統不會有問題。

今天，上網找了許久，終于知道了，這原來是IE7中加強了安全限制。通過http訪問的頁面默認是沒有訪問用戶本機圖片文件的權限的，所以通過javascript獲取不了本機的圖片路徑等相關信息。網上也有幾種解決方案，一種是通過利用style的"DXImageTransform.Microsoft.AlphaImageLoader" 濾鏡來實現，而另一種，則是設置當前站點為安全站點即可。

由于，預覽還涉及到圖片旋轉等，利用"DXImageTransform.Microsoft.AlphaImageLoader"方式，確不知道該如何旋轉此濾鏡中的圖片，故暫時決定采用設置安全性方式，有勞用戶了。

一些莫名其妙的錯誤都是有源頭的。

收集的資料貼出來：

在IE6.0中，用戶可以在javascript中或許最終用戶本地圖片的長寬：

<Script language=Javascript>
function getLocalImageInfo( imgUrl )
{
var objImg = new Image();
objImg.src = imgUrl;
alert( objImg.width ) //the width of the local image
alert( objImg.height ) //the height of the local image
}
//調用如下
getLocalImageInfo( "file://c:\1.jpg" );
</Script>

并且，在IE6.0中，在客戶端本地上傳圖片前可以通過Javascript/html預覽要上傳的圖片，并獲取圖片的文件大小：

< html >
< head >
< title > Upload file </ title >
</ head >
< body >
< input type = "file" onchange = "javascript:previewImage(this.value)" >
< img id = "img" />
< script language = "javascrtip" >
function previewImage( imgUrl )
{
var objImg = document .getElementById("img");
objImg.src = imgUrl ;
alert( "the size of the image file:" + objImg.fileSize )
}
</ script >
</ body >
</ 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" 濾鏡來實現：

< html >
< head id = "Head1" runat = "server" >
< title > Untitled Page </ title >
< script language = javascript >
function setImagePreview( fileUrl )
{
var objDivFilter = document .getElementById("divFilter")
if( fileUrl )
{
objDivFilter.style.width = "400px" ;
objDivFilter.style.height = "400px" ; //這個設置初始大小是必須的
objDivFilter.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = image)" ;
objDivFilter.filters.item("DXImageTransform.Microsoft.AlphaImageLoader") .src = fileUrl ;
// get width and height
alert( objDivFilter.offsetWidth)
alert( objDivFilter.offsetHeight)
}
}
</ script >
</ head >
< body >
< form id = "form1" runat = "server" >
< div >
< asp:FileUpload ID = "txtFile" runat = "server" Width = "508px" onchange = "javascript:setImagePreview( this.value );" />
< br />
< div id = "divFilter" />
</ div >
</ form >
</ body >
但上述辦法還不能在客戶端獲取圖片文件的大小，我也沒有找到很好的解決方案。

另外：在.net中，可以在C#后臺代碼中獲取圖片的相應信息，只不過這種方式增加了一些不必要的網絡傳輸過程，有一定的性能代價。
資料二：
本地圖片預覽代碼（支持 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 屬性。
示例代碼：

<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>本地圖片預覽代碼（支持 IE6、IE7）</title> <style type="text/css"> #newPreview { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } </style> <script type="text/javascript" language="javascript">  </script> </head> <body> <p>說明：以下針對的是互聯網情況，如果您在本地作測試，比如輸入的地址是：http://127.0.0.1/...，則可以看到全部預覽。</p> <hr /> <p>如果您使用的是 IE6，則可以看到以下預覽；如果您使用的是 IE7，則看不到以下預覽。</p> <div id="oldPreview"></div> <hr /> <p>不論您使用的是 IE6 還是 IE7，均可以看到以下預覽。</p> <div id="newPreview"></div> <hr /> <p>請選擇一個圖片進行預覽：<input type="file" size="20" onchange="javascript:PreviewImg(this);" /></p> </body> </html>
[Ctrl+A 全部選擇提示：您可先修改部分代碼，再按運行]

相關閱讀：http://www.cftea.com/products/ 很好的學習地方

posted on 2008-09-22 14:23 liwei5891 閱讀(920) 評論(0) 編輯收藏所屬分類: Others

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 足球規則-視頻海量用戶積分排名算法探討(轉) 雙系統unbuntu訪問windows磁盤 UML精粹：標準對象建模語言簡明指南第三版下載地址 JRockit Mission Control建立到Tomcat的連接(windows) eclipse調試JBOSS IE7安全限制問題 weblogic 5ip限制問題

磨刀不誤砍柴工

文章分類

文章檔案

相冊

常用鏈接

程序江湖

最新評論