js 上传图片预览(Chrome IE ,Firefox,Opera)

  1. 以下是相应的js代码:

    注意,所有的js文件只有两个是外部接口,也就是两个id,分别是上传控件<input type=”file”>的id为fileid,还有<div>的id为preview,此来显示图片。

    最后应用到自己的项目时,只需在以下js代码里改掉这两个id为自己的id即可。

  2.  
  3. // 获取本地上传的照片路径    
  4. function getPath(obj) {    
  5.           if (obj) {    
  6.               //ie    
  7.               if (window.navigator.userAgent.indexOf(“MSIE”) >= 1) {    
  8.                   obj.select();    
  9.                   // IE下取得图片的本地路径    
  10.                   return document.selection.createRange().text;    
  11.               }    
  12.               //firefox    
  13.               else if (window.navigator.userAgent.indexOf(“Firefox”) >= 1) {    
  14.                   if (obj.files) {    
  15.                       // Firefox下取得的是图片的数据    
  16.                       return obj.files.item(0).getAsDataURL();    
  17.                   }    
  18.                   return obj.value;    
  19.               }    
  20.               return obj.value;    
  21.           }    
  22.       }    
  23. //显示图片  
  24.   
  25. function previewPhoto(){    
  26.     var picsrc=getPath(document.all.fileid);    
  27.     var picpreview=document.getElementById(“preview”);    
  28.     if(!picsrc){     
  29.      return    
  30.     }    
  31.     if(window.navigator.userAgent.indexOf(“MSIE”) >= 1) {    
  32.          if(picpreview) {    
  33.           try{    
  34.                  picpreview.filters.item(“DXImageTransform.Microsoft.AlphaImageLoader”).src = picsrc;    
  35.                 }catch(ex){    
  36.            alert(“文件路径非法,请重新选择!”) ;    
  37.            return false;    
  38.           }    
  39.      }else{     
  40.         picpreview.innerHTML=“<img src='”+picsrc+“‘ />”;    
  41.      }    
  42.    }    
  43. }    
  44.   
  45.   
  46.   
  47. function preImg(fileid, imgid) {  
  48.     if (typeof FileReader == ‘undefined’) {  
  49.         var picsrc=getPath(document.all.fileid)  
  50.         $(“#imgid”).attr({ src: picsrc});  
  51.         previewPhoto();  
  52.     }  
  53.     else{  
  54.     var reader = new FileReader();  
  55.     var name=$(“#fileid”).val();  
  56.     var picpreview=document.getElementById(“preview”);    
  57.     reader.onload = function(e) {  
  58.         var img = document.getElementById(imgid);  
  59.         //img.src = this.result;  
  60.         picpreview.innerHTML=“<img src='”+this.result+“‘ style=’width: 179px; height: 189px;’ />”;    
  61.     }  
  62.     reader.readAsDataURL(document.getElementById(fileid).files[0]);  
  63. }  
  1. }  
<html>
  1. <div id=“preview” style=“filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:180px;height:190px;border:solid 1px black;”>      
  2. <input type=“file” id=“fileid” name=“photofile” onchange=“preImg(this.id,’imgid’);”/>