[轉]很簡單的JS實現上傳前預覽圖片(兼容IE8)


關於圖片預覽的一個小方法,很簡單,我在網上看到的,下面是源碼:

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <script type="text/javascript" language="javascript">
 4 
 5     function PreviewImg(imgFile) {
 6 
 7         var imgDiv = document.getElementById("gggg");
 8 
 9         imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
10         imgDiv.filters("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
11     } 
12 </script>
13 </head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <asp:FileUpload ID="fp" onchange="javascript:PreviewImg(this);" runat="server" />
18     </div>
19        <div id="gggg" style="width: 300px; height: 300px">
20     </div>       
21     </form>
22 </body>
23 </html>

 

起初是看了這個:

將如下代碼放入<head></head>中:

 1 <script type="text/javascript" language="javascript"> 
 2 <!-- 
 3 function PreviewImg(imgFile){ 
 4    
 5      var newPreview = document.getElementById("newPreview");     
 6      var imgDiv = document.createElement("div"); 
 7      document.body.appendChild(imgDiv); 
 8      imgDiv.style.width = "118px";     imgDiv.style.height = "127px"; 
 9      imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";    
10      imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; 
11      newPreview.appendChild(imgDiv);     
12      var showPicUrl = document.getElementById("showPicUrl"); 
13      showPicUrl.innerText=imgFile.value; 
14      newPreview.style.width = "80px"; 
15      newPreview.style.height = "60px"; 
16 } 
17 --> 
18 </script> 

在頁面中加入如下代碼:

1          <div id="newPreview"></div> 
2          <div id="showPicUrl"></div> 
3          <hr /> 
4          <p> 
5              選擇圖片:<input type="file" size="20" onchange="javascript:PreviewImg(this);" /> 
6          </p>

后來發現這樣不能實現只預覽一張!!它是預覽一張就添加一張!而我要的是只預覽一張!經過網上在搜索看到了關於這個方法的說明!!便得到了我的方法!!

 

以下便是這個方法的說明:

在 IE6 中,可以很方便地利用 img 的 src 屬性,實現本地圖片預覽,然而在 IE7 中,這種辦法卻行不通。需要用 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 地址指定背景圖像。假如忽略此參數,濾鏡將不會作用。

 

 來源:http://hi.baidu.com/pukuimin1226/item/ddf147972c6d9cdc1a49dfe9


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com