IE6, IE7과 호환되는 JS 이미지 미리 보기 코드

 

  

   
   <
   html
   >
   
 
   <
   head
   >
    
 
   <
   meta 
   http-equiv
   ="Content-Type"
    content
   ="text/html; charset=gb2312"
    
   />
    
 
   <
   title
   >
   JS       
   </
   title
   >
    
 
   <
   script 
   type
   ="text/javascript"
    language
   ="javascript"
   >
   
 
   <!--
    
 
   function
    PreviewImg(imgFile){
 
   var
    newPreview 
   =
    document.getElementById(
   "
   newPreview
   "
   );
 
   var
    imgDiv 
   =
    document.createElement(
   "
   div
   "
   );
 document.body.appendChild(imgDiv); 
 
   var
    image
   =
   new
    Image(); 
 
 image.src
   =
   imgFile.value;
 imgDiv.style.width 
   =
    image.width;
 imgDiv.style.height 
   =
    image.height;
 imgDiv.style.filter
   =
   "
   progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)
   "
   ;
 imgDiv.filters.item(
   "
   DXImageTransform.Microsoft.AlphaImageLoader
   "
   ).src 
   =
    imgFile.value;
 newPreview.appendChild(imgDiv);
 
   var
    showPicUrl 
   =
    document.getElementById(
   "
   showPicUrl
   "
   );
 showPicUrl.innerText
   =
   imgFile.value;
 
   //
   newPreview.style.width = "80px";
   

    
   //
   newPreview.style.height = "60px";
   

    }
 
   -->
   
 
   </
   script
   >
   
 
   </
   head
   >
   
 
   <
   body
   >
   
 
   <
   p
   >
     IE6、IE7
   </
   p
   >
   
 
   <
   div 
   id
   ="newPreview"
   ></
   div
   >
   
 
   <
   div 
   id
   ="showPicUrl"
   ></
   div
   >
   
 
   <
   hr 
   />
   
 
   <
   p
   >
   
     ：
   <
   input 
   type
   ="file"
    size
   ="20"
    onchange
   ="javascript:PreviewImg(this);"
    
   />
   
 
   </
   p
   >
   
 
   </
   body
   >
   

   </
   html
   >
   

  

 
 
 
 
포인트는 필터를 하나 썼어요.
 
 
 
관련 자료
 
 
 
Microsoft.AlphaImageLoader 필터 설명
 
 
 
Microsoft.AlphaImageLoader는 IE 필터의 일종으로, 이미지를 투명하게 처리하는 것이 주된 역할이다.FireFox와 IE7 이상의 IE 브라우저는 투명한 PNG 이미지를 지원하지만 IE5-IE6의 의미는 있다.
문법:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled, sizingMethod=sSize, src=sURL) 속성:enabled: 옵션이 있습니다.부울 값.필터 활성화 여부를 설정하거나 읽어들입니다.true | false true: 기본값.필터가 활성화됩니다.false: 필터가 금지되어 있습니다.sizingMethod: 옵션이 있습니다.문자열(String).필터 역할을 하는 객체의 이미지를 객체 컨테이너 경계 내에 표시하는 방법을 설정하거나 읽어들입니다.crop: 대상의 크기에 맞게 그림을 잘라냅니다.image: 기본값.그림의 사이즈에 맞게 대상의 사이즈 경계를 늘리거나 줄이다.scale: 대상의 사이즈 경계에 맞게 그림을 축소합니다.src: 필수 옵션입니다.문자열(String).절대 또는 상대 URL 주소를 사용하여 배경 그림을 지정합니다.이 매개 변수를 생략하면 필터가 작동하지 않습니다.
특성: Enabled: 읽기 및 쓰기 가능.부울 값.enabled 등록 정보를 참조하십시오.sizingMethod: 읽기 및 쓰기 가능문자열(String).sizingMethod 등록 정보를 참조하십시오.src: 읽기와 쓰기.문자열(String).src 등록 정보를 참조하십시오.
설명: 대상 용기 경계 내에 대상의 배경과 내용 사이에 그림을 표시합니다.이 그림을 잘라내고 크기를 바꾸는 동작을 제공합니다.PNG(Portable Network Graphics) 형식을 로드하면 투명도 0%-100%가 제공됩니다.PNG(Portable Network Graphics) 형식의 그림은 텍스트 선택에 지장을 주지 않습니다.PNG(Portable Network Graphics) 형식의 그림이 완전 투명한 영역 뒤에 표시되는 내용을 선택할 수 있다는 것이다.
예: #idDiv{position:absolute;left:140px;height:400;width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rain1977.gif',sizingMethod='scale');.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');} MSDN: http://msdn2.microsoft.com/en-us/library/ms532969.aspx P.S. 백그라운드 이미지 속성을 사용하려면 그림의 원래 크기를 표시하지 않고 IMG width=100% heigth=100% 효과와 유사하게 이 Filter를 통해 실현할 수 있습니다.
Example:span.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.jpg', sizingMethod='scale')";
인용: 마지막으로 FF와 IE의 효과 조화에 관한 문제를 말하겠습니다.이 필터 효과는 IE에만 적용되고 FF 아래에서는 표시할 수 없다. 선배가 실현하기 어렵다고 말한 최종 문제라고 생각한다.기존에 저희가 * 또는...IE하와 FF의 차이를 복구합니다. 이번에는 FF가 실현할 수 없는 문제를 복구할 방법을 찾아야 합니다.사실 생각하면 간단해요.먼저 FF가 이 그림을 정상적으로 표시하고 * 또는 로IE에서 마지막으로 * 또는 로 표시된 효과를 지웁니다.위와 같은 필터 효과를 줍니다.큰일 났다!
이상은 공식적인 설명입니다.사실상 실제 작업에서 주의해야 할 것은 알파ImageLoader 필터는 이 구역의 링크와 단추를 무효화시킬 수 있다. 일반적인 해결 방법은 링크나 단추를 추가하는 것이다. Position:relative는 상대적으로 부동하게 한다. 주의해야 할 것은 필터를 불러오는 구역의 부층에 Position:absolute가 절대적으로 위치할 때position:relative를 사용해도 링크를 복원할 수 없다는 것이다.부동 방법으로 처리하는 것을 건의합니다.
구체적인 작업:
미리 보기 영역(예를 들어div에서 미리 보기)을 위한 스타일 추가:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);. AlphaImageLoader의 src 속성을 설정합니다.
본 논문은 CSDN 블로그에서 왔으며, 전재는 출처를 밝혀 주십시오: http://blog.csdn.net/lsd123/archive/2008/12/29/3638329.aspx