title: Removing an image preview when file upload is cancelled
body: <p>I am trying to preview an image before uploading it.To that end, i have an  which will load the picture whenever a user uploads a picture.</p>
  
  <p>By clicking the image that is preview, the user is able to cancel the upload, and the image previewed will disappear.However, if the user has already selected an image, and then click '<em>cancel</em>' when choosing a file to upload(because he changed his mind etc), the image that was previously selected will still remain, and will not disappear.</p>
  
  <p>Is there anyway to remove the image that was previewed in this case?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type='file' id='input1'&gt;
  &lt;img id='imagepreview1'&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function(){
  
      function readURL(input) {        
          if (input.files &amp;&amp; input.files[0]) {
              var reader = new FileReader();        
              reader.onload = function (e) {
                  $('#imagepreview1').prop('src', e.target.result).show();
              }        
              reader.readAsDataURL(input.files[0]);
          }
      }
  
      $("#input1").change(function () {
          readURL(this);
          $('#imagepreview1').show();
      });
  
      $('#imagepreview1').click(function(){        
          $('#input1').replaceWith($('#input1').clone(true));
          $('#imagepreview1').hide();        
      });
  
  });
  </code></pre>