title: Image Upload with Preview and Delete
body: <p>Have the followig questions and need answers regarding the following script that will Preview a Photo before upload. The script is from <a href="http://jsbin.com/uboqu3/edit#javascript,html" rel="nofollow">http://jsbin.com/uboqu3/edit#javascript,html</a> </p>
  
  <p>1) The script works for Firefox, no good for IE. How to make it works for IE?</p>
  
  <p>2) It does not have a method to delete the photo. Needs something like a small image "X" installed on the Preview Photo, clicking this "X" will delete the photo. Can anyone supply this solution?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function readURL(input) {
      if (input.files &amp;&amp; input.files[0]) {
          var reader = new FileReader();
  
          reader.onload = function (e) {
              $('#img_prev')
              .attr('src', e.target.result)
              .height(200);
          };
  
          reader.readAsDataURL(input.files[0]);
      }
  }
  &lt;/script&gt;
  
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;!--[if IE]&gt;
  &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;style&gt;
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type='file' onchange="readURL(this);" /&gt;
  &lt;img id="img_prev" src="#" alt="your image" /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>