隨筆-295 
評(píng)論-26 
文章-1 
trackbacks-0

          
	

          

          
	
					


          
	
	
		
		
          
				
          在 IE6 中，可以很方便地利用 img 的 src 屬性，實(shí)現(xiàn)本地圖片預(yù)覽，然而在 IE7 中，這種辦法卻行不通。需要用 AlphaImageLoader。
          
				
          
				
          
						AlphaImageLoader
				
          
				
          
						說明：
				
          
				
          在對(duì)象容器邊界內(nèi)，在對(duì)象的背景和內(nèi)容之間顯示一張圖片。并提供對(duì)此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。
          
				
          
						語法：
				
          
				
          filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) 
          
				
          
						enabled：可選項(xiàng)。布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。
          true：默認(rèn)值。濾鏡激活。 
          false：濾鏡被禁止。
          
				
          
						sizingMethod：可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。
          crop：剪切圖片以適應(yīng)對(duì)象尺寸。 
          image：默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。 
          scale：縮放圖片以適應(yīng)對(duì)象的尺寸邊界。
          
				
          
						src：必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。 
          
				
          
				
          
						具體操作：
				
          
				
            
						
          1. 為預(yù)覽區(qū)域（比如要在某個(gè)?div 中預(yù)覽）添加樣式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。 

            2. 
						
          2. 為 AlphaImageLoader 設(shè)置 src 屬性。 
            3. 
				
          
				
          
				
          ?
          
				
          
						示例代碼：
          
				
          
				
          
						
						<?
						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
						>
						本地圖片預(yù)覽代碼（支持?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)
          
								
								
										{
          ????          
										//
										原來的預(yù)覽代碼，不支持?IE7。
										
												
          
												
										          
										????
										var
										?oldPreview?
										=
										?document.getElementById(
										"
										oldPreview
										"
										);
          ????oldPreview.innerHTML?          
										=
										?
										"
										<img?src=\
										"
										file:\\\\
										"
										?+?imgFile.value?+?
										"
										\
										"
										?width=\
										"
										80
										\
										"
										?height=\
										"
										60
										\
										"
										?/>
										"
										;
          ????
          ????          
										//
										新的預(yù)覽代碼，支持?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
						>
						說明：以下針對(duì)的是互聯(lián)網(wǎng)情況，如果您在本地作測(cè)試，比如輸入的地址是：http://127.0.0.1/，則可以看到全部預(yù)覽。
						</
						p
						>
						
								
          
								
								
          
								
						          
						<
						hr?
						/>
						
								
          
								
								
          
								
						          
						<
						p
						>
						如果您使用的是?IE6，則可以看到以下預(yù)覽；如果您使用的是?IE7，則看不到以下預(yù)覽。
						</
						p
						>
						
								
          
								
						          
						<
						div?
						id
						="oldPreview"
						></
						div
						>
						
								
          
								
								
          
								
						          
						<
						hr?
						/>
						
								
          
								
								
          
								
						          
						<
						p
						>
						不論您使用的是?IE6?還是?IE7，均可以看到以下預(yù)覽。
						</
						p
						>
						
								
          
								
						          
						<
						div?
						id
						="newPreview"
						></
						div
						>
						
								
          
								
								
          
								
						          
						<
						hr?
						/>
						
								
          
								
								
          
								
						          
						<
						p
						>
						請(qǐng)選擇一個(gè)圖片進(jìn)行預(yù)覽：
						<
						input?
						type
						="file"
						?size
						="20"
						?onchange
						="javascript:PreviewImg(this);"
						?
						/></
						p
						>
						
								
          
								
								
          
								
						          
						</
						body
						>
						
								
          
								
								
          
								
						          
						</
						html
						>
				
          
		
          


          大盤預(yù)測(cè)
 
國富論
	
          posted on 2007-09-29 13:16 華夢(mèng)行 閱讀(2708) 評(píng)論(4)  編輯  收藏  
          

          







          
	    
    


          
評(píng)論:

          
	

		
          
			
          
			# re: 本地圖片預(yù)覽代碼（支持 IE6、IE7） 
				2008-02-26 15:48 | flyboy2
          
				
          如何實(shí)現(xiàn)預(yù)覽圖片的尺寸與原文件尺寸一樣呢？！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: 本地圖片預(yù)覽代碼（支持 IE6、IE7） 
				2008-02-27 19:22 | huamengxing
          
				
           function  PreviewImg(imgFile)

            {

               // 原來的預(yù)覽代碼，不支持 IE7。 

                var  oldPreview  =  document.getElementById( " oldPreview " );

              oldPreview.innerHTML  =   " <img src=\ " file:\\\\ "  + imgFile.value +  " \ "  width=\ " 80 \ "  height=\ " 60 \ "  /> " ;

              

               // 新的預(yù)覽代碼，支持 IE6、IE7。 

                var  newPreview  =  document.getElementById( " newPreview " );

              newPreview.filters.item( " DXImageTransform.Microsoft.AlphaImageLoader " ).src  =  imgFile.value;

              newPreview.style.width  =   " 80px " ;

              newPreview.style.height  =   " 60px " ;

          } 

           --> 

            回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: 本地圖片預(yù)覽代碼（支持 IE6、IE7） 
				2008-11-03 12:42 | ss
          
				
          用try{IE7}catch(err){
          IE6
          }  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: 本地圖片預(yù)覽代碼（支持 IE6、IE7） 
				2011-11-07 12:25 | asdas
          
				
          [size=2][color=#000000][align=center][table=550,#cccc99][tr][td][/td][/tr][/table][/align][align=center][table=550,#f7f7f7][tr][td][table=540,#f7f7f7][tr][td]

          

          [align=center][table=480,#ffffcc][tr][td][align=center][font=Impact][size=3][color=black]sprout.5d6d.com[[size=2]代碼分享[/size]][/color][/size][/font][/align][/td][/tr][tr][td][/td][/tr][/table]

          

          [font=Impact]

          [size=2][color=black][/color][/size][/font][table=250,white][tr][td][align=center][font=Impact][size=2][color=black]播放器[size=3]or56[/size]相冊(cè)[/color][/size][/font][/align][/td][/tr][tr][td][/td][/tr][/table]

          

          

          

          [align=center][table=480,#ffffcc][tr][td][align=center][font=Impact][size=3][color=black]sprout.5d6d.com[[size=2]整段歌詞[/size]][/color][/size][/font][/align][/td][/tr][tr][td][/td][/tr][/table][/align]

          

          

          [align=center]

          [font=Impact]

          [size=2][color=black][/color][/size][/font][table=250,white][tr][td][align=center][font=Impact][size=2][color=black]擺個(gè)下載[/color][/size][/font][/align][/td][/tr][tr][td][/td][/tr][/table]

          

          

          

          

          [/align]

          [/td][/tr][/table][/align][/td][/tr][/table][/align][align=center][table=550,#cccc99][tr][td][/td][/tr][/table][/align][align=center][table=550,#cccc99][tr][td][/td][/tr][/table][/align][align=center][table=550,#cccc99][tr][td][/td][/tr][/table][/align]

          [/color][/size]  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	








          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網(wǎng)站導(dǎo)航:
          
			博客園  
			IT新聞  
			Chat2DB  
			C++博客  
			博問  
			
			
          
		          		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          







    







          
        
	




主站蜘蛛池模板：
从化市|
涟源市|
那曲县|
全州县|
盐边县|
芦山县|
松潘县|
牡丹江市|
建平县|
措美县|
武宁县|
康定县|
海城市|
宁都县|
象州县|
措美县|
定结县|
金昌市|
泊头市|
厦门市|
慈溪市|
木兰县|
平江县|
新干县|
农安县|
怀安县|
子长县|
德江县|
东山县|
郓城县|
鸡泽县|
晴隆县|
富裕县|
会东县|
永春县|
榆林市|
满城县|
平湖市|
琼海市|
永年县|
永康市|