Firefox3,IE6,IE7,IE8上传图片预览

Firefox3,IE6,IE7,IE8上传图片预览，这是一个比较实用的功能，暂时记录下来，以供参考。

<! 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 >
     < title > Firefox3,IE6,IE7,IE8上传图片预览 </ title >
< style  type ="text/css" >
#preview_wrapper {
display : inline-block ;
width : 300px ;
height : 300px ;
background-color : #CCC ;
}
#preview_fake {
/*  该对象用于在IE下显示预览图片
*/
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) ;
}
#preview_size_fake {
/*  该对象只用来在IE下获得图片的原始尺寸，无其它用途
*/
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image) ;
visibility : hidden ;
}
#preview {
/*  该对象用于在FF下显示预览图片
*/
width : 300px ;
height : 300px ;
}
</ 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();
   var  imgSrc  = document.selection.createRange().text;  
  objPreviewFake.filters.item( ' DXImageTransform.Microsoft.AlphaImageLoader ' ).src =  imgSrc;
  objPreviewSizeFake.filters.item( ' DXImageTransform.Microsoft.AlphaImageLoader ' ).src =  imgSrc;  
  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 >
</ head >
< body >
< div  id ="preview_wrapper" >
   < div  id ="preview_fake" >
   < img  id ="preview"  onload ="onPreviewLoad(this)" />
   </ div >
</ div >
< br />
< input  id ="upload_img"  type ="file"  onchange ="onUploadImgChange(this)" />
< br />
< img  id ="preview_size_fake" />
</ body >
</ html >