Js 图片上传本地预览

Js 图片上传本地预览，这里只展示前端功能的实现方法，并且讲解了 IE 和 Firefox 两者兼容的处理方法。

下面的 code 是上传图片且在本地预览的 Js 函数的实现过程：

function previewImage(file){
	 var file = document.getElementById("uploadfile");       
     //IE8 中没有files这一属性,且不支持 FileReader
     if(file.files && file.files[0]){
  	   var reader = new FileReader();
  	      reader.onload = function(evt){
  	    	  //document.getElementById("newimg").src = evt.target.result;
  	    	  $("#fimg").css("display","block"); 
  	    	  $("#fimg").attr("src",evt.target.result); 
  	      }
  	      reader.readAsDataURL(file.files[0]);
  	      document.getElementById("imageFileName").value = $("#uploadfile").val(); 
     }else{ // IE 滤镜方式
  	   document.getElementById("uploadfile").select();
  	   var path = document.selection.createRange().text;
  	   //var styleFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'+path+'")';   	  
  	   document.getElementById("preview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+path+"')";
  	   $("#fimg").css("display","none"); 
  	   //通过路径截取文件名字
  	   var fn_arr = path.split("\\");
  	   var fname = fn_arr[fn_arr.length-1];
  	   document.getElementById("imageFileName").value = fname;  
    }      
}
 

body 中的元素：

<div id="preview" style="width:800px; height:115px; padding-top:15px;">
 <img id="oldimg" name="food.picture" src="<%=basePath %>/images/food/qscaipu.jpg" width="136" height="100" 
 style="float:left;"/>
 
 <img id="newimg" src="" style="display:none; margin-left:60px; float:left;"/>
 
 <div id="filterPreview" style="float:left; margin-left:60px; width:150px; height:100px;"></div>
 
 </div>
  <div class="uploader">
     <input id="imageFileName" name="imageFileName" class="filename" type="text" readonly="readonly" value="" />
     <input class="button" type="button" value="上传..." name="file" />
     <input id="uploadfile" name="file" type="file" size="30" class="file" onchange="previewImage()" />
</div>
<div>
  
</div>