<!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=utf-8" />

 <title>本地图片预览</title>

 <style type="text/css">

 #preview{width:198px;height:148px;border:1px solid #000;overflow:hidden;}

 #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}

 </style>

 <script type="text/javascript">

 function previewImage(file)

 {

   var MAXWIDTH  = 198;

   var MAXHEIGHT = 148;

   var div = document.getElementById('preview');

   if (file.files && file.files[0])

   {

     div.innerHTML = '<img id=imghead>';

     var img = document.getElementById('imghead');

     img.onload = function(){

       var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

       img.width = rect.width;

       img.height = rect.height;

       img.style.marginLeft = rect.left+'px';

       img.style.marginTop = rect.top+'px';

     }

     var reader = new FileReader();

     reader.onload = function(evt){img.src = evt.target.result;}

     reader.readAsDataURL(file.files[0]);

   }

   else

   {

     var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';

     file.select();

     var src = document.selection.createRange().text;

     div.innerHTML = '<img id=imghead>';

     var img = document.getElementById('imghead');

     img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;

     var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

     status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);

     div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";

   }

 }

 function clacImgZoomParam( maxWidth, maxHeight, width, height ){

     var param = {top:0, left:0, width:width, height:height};

     if( width>maxWidth || height>maxHeight )

     {

         rateWidth = width / maxWidth;

         rateHeight = height / maxHeight;  

         if( rateWidth > rateHeight )

         {

             param.width =  maxWidth;

             param.height = Math.round(height / rateWidth);

         }else

         {

             param.width = Math.round(width / rateHeight);

             param.height = maxHeight;

         }

     }  

     param.left = Math.round((maxWidth - param.width) / 2);

     param.top = Math.round((maxHeight - param.height) / 2);

     return param;

 }

 </script>

 </head>

 <body>

 <div id="preview">

     <img id="imghead" width=198 height=148 border=0 src='' />

 </div>

     <br/>

     <input type="file" onchange="previewImage(this)" />

 </body>

 </html>