IE7遠程客戶端本地預覽圖片的解決辦法(兼容IE6)

IE7 不再支持本地圖片預覽?

如下代碼:

<img src="file:///C:/Documents%20and%20Settings/user/桌面/1.gif">

是顯示客戶端桌面上文件名爲 1.gif 的圖片,在 IE6.0 及以前,可以顯示該圖片。而 IE7.0 及 FF 中,均不能顯示該圖片。不過 IE7.0 中有一個例外,就是如果該段代碼所處的網頁位於本地機上(Web 服務與瀏覽器爲同一機器),則可以顯示。

爲了實現在 IE7 中預覽本地圖片,可使用 AlphaImageLoader,查看解決辦法見下:

---------------

在 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">
<!--
function PreviewImg(imgFile)
{
    //原來的預覽代碼,不支持 IE7。
    var oldPreview = document.getElementById("oldPreview");
    oldPreview.innerHTML = "<img src=\"
file:\\\\" + imgFile.value + "\" width=\"80\" height=\"60\" />";
    
    //新的預覽代碼,支持 IE6、IE7。
    var newPreview = document.getElementById("newPreview");
    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
    newPreview.style.width = "80px";
    newPreview.style.height = "60px";
}
-->
</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" οnchange="javascript :PreviewImg(this);" /></p>

</body>

</html>

--------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------

javascript firefox不顯示本地預覽圖片問題解決

在Firefox一直不能用js做出圖片預覽的效果,下面這個即可解決,用替換的方法實現firefox支持得的路徑格式

<img id="img1" src=""/> 
<script> 
function fileChange(obj) { 
var url = obj.value url = "file:///" + url.replace("\\",'/'); 
alert(url); 
document.getElementById("img1").src= url;

</script> 
<input type="file" οnchange="fileChange(this);" />


關鍵是:url = "file:///" + url.replace("\\",'/');

--------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------

最終處理用ie加信用站點


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章