title: how to preview an image before upload in various browsers
body: <p>I want to show preview of an image before it is uploaded. I have found a partial solution that works for ie6 and firefox, and havent yet tested it in ie7 or ie8. But i want a solution that works in safari, ie7 and ie8 as well. Here is the solution obtained by combining the ie6 and firefox solution:</p>
  
  <pre><code>function preview(what) {
  if(jQuery.browser.msie) {
  document.getElementById("preview-photo").src=what.value;
  return;
  }
  else if(jQuery.browser.safari) {
  document.getElementById("preview-photo").src=what.value;
  return;
  }
  document.getElementById("preview-photo").src=what.files[0].getAsDataURL();
  //  alert(jQuery("#preview-photo").height());
  //  alert(jQuery("#preview-photo").width());
  var h = jQuery("#preview-photo").height();  
  var w = jQuery("#preview-photo").width();//assuming width is 68, and height is floating
  if ((h &gt; 68) || (w &gt; 68)){
  if (h &gt; w){
  jQuery("#preview-photo").css("height", "68px");
  jQuery("#preview-photo").css("width", "auto");
  }else {
  jQuery("#preview-photo").css("width", "68px");
  jQuery("#preview-photo").css("height", "auto");
  }
  }
  }
  </code></pre>
  
  <p>The getAsDataURL() part works in firefox, and the "src=what.value" part works in ie6, but what would work in safari, and does "src=what.value" work in ie7 and ie8 as well? If not, is there some solution that also works there? I will be happy if i can make the image preview work in 5 or 6 browsers. If it doesn't then is the only option to have two forms with image upload part of another form?</p>