很简单的实现上传图片本地预览

方法一

关键代码：

<form action="" method="post" enctype="multipart/form-data" name="form1">
<img src=" " name="image" border=0  id="img"/>
<br />
<input name="picture"  type="file" id="picture" onchange="img.src=this.value" />
</form>

方法二

<script><!--
var checkResult = 'n';
function checkForm()
{
 checkResult='y';
} 
function previewImage(file,divID,imgID)
{
  var MAXWIDTH  = 22;
  var MAXHEIGHT = 28;
  var div = document.getElementById(divID);
  if (file.files && file.files[0])
  {
   div.innerHTML = '<img id="'+imgID+'">';
   var img = document.getElementById(imgID);
   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="'+imgID+'">';
    var img = document.getElementById(imgID);
    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>

html代码：

预览：<span id="preview1"  class="preview">
        <img  id="img1"   class="borderIMG" align="middle" src="${path}/${sell.photoPath}"/>
       </span>