html 实时显示input type=file 上传的图片

在项目开发过程中，有这样的需求：左侧一个<input type="file" > 上传的图片需要在右侧实时显示出该图片。刚拿到需求，感觉头都大了，后来同事帮忙找的例子，也不知其来源，所以在此希望原主看到会，能见谅！！

废话不多说了，直接上代码。

html代码：

<div>
	<label class="edit-font"><span>*</span>服务图片：</label>
	<input class="serverImg" id="imgName" name="imgName" />
	<input id="img" name="img" οnchange="previewImage(this);" type="file"/>
	<span class="ylbut"></span>

<span style="font-family: Arial, Helvetica, sans-serif;"></div></span>

js代码：

function previewImage(file)
{
	
	fileName=$("#img").val();
	$("#imgName").attr("value",fileName);
	
  var MAXWIDTH  = 218;     //用来显示上传图片的宽度
  var MAXHEIGHT = 158;     //用来显示上传图片的高度
  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;
}