Js实现IE9下本地图片预览的代码举例

发布时间:2020-07-14编辑:脚本学堂
本文介绍下,在IE9实现本地图片预览功能的代码一例,从最初到修改为完善的代码,逐一介绍,有需要的朋友,不妨参考学习下。

说明:
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是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 地址指定背景图像。假如忽略此参数,滤镜将不会作用。

具体操作:
为预览区域(比如要在某个 div 中预览)添加样式:filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。
为 AlphaImageLoader 设置 src 属性。

例1, 
 

复制代码 代码示例:
<form id="imgup" method="post" enctype="multipart/form-data" action="picup.ashx"> 
 <input type="file" name="upf" id="fileup" onchange="dox(this)" /> 
 </form> 
 <div id="tp" style="width:200px;height:200px"></div> 
 <script type="text/javascript" charset="utf-8" language="javascript"> 
 function dox(obj) 
 { 
 obj.select(); 
 obj.blur(); 
 var nfile = document.selection.createRange().text; 
 alert("当前选择的文件完整路径是:"+nfile); 
 document.selection.empty();  document.getElementById("tp").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+nfile+"')"; 
 } 
 </script> 

例2,
 

复制代码 代码示例:
 <? 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)-www.jb200.com</ 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"  onchange ="javascript:PreviewImg(this);"   /></ p>  
  </ body>   
  </ html>

例3,
 

复制代码 代码示例:

<style type="text/css"> 
 #kk{ 
  width:400px; 
  height:400px; 
  overflow: hidden; 
 } 
 #preview_wrapper{ 
  width:300px; 
  height:300px; 
  background-color:#CCC; 
  overflow: hidden; 
 } 
 #preview_fake{ /* 该对象用于在IE下显示预览图片 */ 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
  width:300px; 
  overflow: hidden; 
 } 
 #preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */ 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
  width:300px;  
  visibility:hidden;  
  overflow: hidden;
 } 
 #preview{ /* 该对象用于在FF下显示预览图片 */ 
  width:300px; 
  height:300px;
  overflow: hidden;  
 } 
 </style><script type="text/javascript"> 
 function onUploadImgChange(sender){ 
  if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){ 
   alert('图片格式无效!'); 
   return false; 
  } 
  var objPreview = document.getElementById('preview'); 
  var objPreviewFake = document.getElementById('preview_fake'); 
  var objPreviewSizeFake = document.getElementById('preview_size_fake'); 
  if( sender.files &&  sender.files[0] ){ 
   objPreview.style.display = 'block'; 
   objPreview.style.width = 'auto'; 
   objPreview.style.height = 'auto'; 
    
   // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 
   objPreview.src = sender.files[0].getAsDataURL();  
  }else if( objPreviewFake.filters ){  
   // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果 
   //(相同环境有时能显示,有时不显示),因此只能用滤镜来解决 
    
   // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 
   sender.select(); 
   sender.blur(); 
   var imgSrc = document.selection.createRange().text;   
   objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; 
   objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
   alert("已成功选择图片!"); 
   autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight ); 
   objPreview.style.display = 'none'; 
  }
 }
 
 function onPreviewLoad(sender){ 
  autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight ); 
 }
 function autoSizePreview( objPre, originalWidth, originalHeight ){ 
  var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight ); 
  objPre.style.width = zoomParam.width + 'px'; 
  objPre.style.height = zoomParam.height + 'px'; 
  objPre.style.marginTop = zoomParam.top + 'px'; 
  objPre.style.marginLeft = zoomParam.left + 'px'; 
 }
 function clacImgZoomParam( maxWidth, maxHeight, width, height ){ 
  var param = { width:width, height:height, top:0, left:0 }; 
   
  if( width>maxWidth || height>maxHeight ){ 
   rateWidth = width / maxWidth; 
   rateHeight = height / maxHeight; 
    
   if( rateWidth> rateHeight ){ 
    param.width =  maxWidth; 
    param.height = height / rateWidth; 
   }else{ 
    param.width = width / rateHeight; 
    param.height = maxHeight; 
   }
  }   
  param.left = (maxWidth - param.width) / 2; 
  param.top = (maxHeight - param.height) / 2; 

  return param; 
 }
 </script> <input name="localfile"  type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"/> <!--以下是预览图片用的--> 
 <div id="kk"> 
 <div id="preview_wrapper"> 
 <div id="preview_fake"> 
 <img id="preview" src="" onload="onPreviewLoad(this)"/> 
 </div> 
 </div> 
 <br/>  
 <img id="preview_size_fake" /> 
 </div>