js上传图片预览(For IE ,firefox)

方法1：不兼容chrome
var img=new Image();
img.src="图片路径";
//img.height;
//img.width;

 

方法2：支持IE，不兼容FF
function loadImage(url) {
    var img = new Image();
    img.src = url;
    if (img.complete) { 
       //img.width;     
    }
    img.onload = function () {        
          //(this.height);
    };
};

方法3：（需要指定Img　ID，不方便）测试通过，可兼容IE， FF〉7.0 

function preImg(){

var upload_file=document.getElementById("upload_file");
var browser_agent=navigator.userAgent.toLowerCase();

if(browser_agent.indexOf("firefox")!=-1)
 {
 //fireFox
 // document.getElementById("preimg").src = o.files[0].getAsDataUrl();   //For < FF7
 var objectURL = window.URL.createObjectURL(upload_file.files[0]);
 document.getElementById("preImg").src = objectURL;

// document.getElementById("preImg").style.display = "block";
  /* document.getElementById("preImg").onload = function () { 
         alert(this.width);   //this.naturalWidth //For FF
     };*/
 
}
 else
    {
    //ie浏览器
      document.getElementById('preimg').src =upload_file.value;
     /* document.getElementById("pimg").onload = function () { 
          alert(this.width);
     };*/
            
}

 

 document.getElementById("preimg").onload = function () {
          alert(this.width);

 }

}

 

 

<form name=form action="" method=post enctype=multipart/form-data>

<img name="preImg" id="preImg" />
 <input type=file name="upload_file" id="upload_file" onChange="preImg()">
 <input type=button value ="上传" >
 
 </form>

 

方法４：（推荐）摘自项目实例

//onload
 $("input[name='attUpload[]']").change(function(e){   
  if($(this).val() && allowFileType($(this).val(),"image")){ 
   var browserAgent=navigator.userAgent.toLowerCase();
   var $thisImg = $(e.target).parents(".attUploadArea").find(".imgPreview img"); 
   var image = new Image();
   var ff_filesize=0;  
   if(browserAgent.indexOf("firefox")!=-1){
    var fileUrl = window.URL.createObjectURL(this.files[0]); 
    //ff_filesize = this.files[0].fileSize;  //FF ver>7　无效 
   }
   else{
    var fileUrl = $(this).val();
   }   
   image.onload = function(){
    var width = image.width;
    var height = image.height;
    var filesize = image.fileSize;
    if(ff_filesize>0){filesize = ff_filesize;}
    
    $(e.target).nextAll("input[name='imgWidth[]']").val(width);
    $(e.target).nextAll("input[name='imgHeight[]']").val(height);
    if(width>100){
     width=100;
    }
    if(height>75){
     height=75;
    }    
    if(filesize>1024*512){
     alert('Notice: File Size > 512K .');
    }
    $thisImg.attr("width",width); 
    $thisImg.attr("height",height); 
    $thisImg.attr("src",fileUrl);     
   }   
   image.src = fileUrl; 
      
  }
  else{
   alert("Invalid File Type.");
  } 
 });

 

//create

function attUploadAreaCreate()
{
 var appdir = $("input[name='appDir']").val(); 
 $("#auAreaId").append(
  '<dl class="attUploadArea">'+
  ' <dt><div class="imgPreview"><img src="'+ appdir +'public/images/bg/img_100x75.gif" ></div></dt>'+
  ' <dd>'+
  '  <input type="file" name="attUpload[]" class="w400px"> <br />'+
  '  宽度：<input type="text" name="imgWidth[]" class="w30px">像素　高度：<input type="text" name="imgHeight[]" class="w30px">像素'+
  '  类型：<select name="imgType[]" size="1"></select>　次序：<input type="text" name="orderId[]" class="w30px"> <br />'+
  '  说明：<input type="text" name="imgDesc[]" class="w400px">'+
  ' </dd>'+
  '</dl>'
 );
 //从客户端读取文件，须读取权
 $.get("/public/xml/attType.xml",function(data){
  if (data !== '') {
   var thisxml = [];
   $(data).find("proDetail item").each(function(i){
     //var oid = $(this).attr("id"); //获取item: id
    var name = $(this).children("name").text();
    var val = $(this).children("value").text();    
    thisxml.push("<option value='"+val+"'>"+name+"</option>");
   });
   $("select[name='imgType[]']").last().append(thisxml.join('')).css("width", "auto"); //不指定时ie9为0
  }
 },'xml');
}