title: How to clear a previous file from a 'input type' in HTML5 FileReader
body: <p>I have a file-input:</p>
  
  <pre><code>&lt;img id="uploadPreview"&gt;
     &lt;div id="changeImage"&gt;Change&lt;/div&gt;
  &lt;div id="customImage"&gt;
     &lt;input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" /&gt;
     &lt;div class='upload blank' id="add-image"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The function is like below:</p>
  
  <pre><code>var oFReader = new FileReader();
  oFReader.readAsDataURL(document.getElementById("myfile").files[0]);
  
  oFReader.onload = function (oFREvent) {
      document.getElementById("uploadPreview").src = oFREvent.target.result;
  };
  
  function PreviewImage() {
          var oFReader = new FileReader();
          oFReader.readAsDataURL(document.getElementById("myfile").files[0]);
          $("#uploadPreview").removeClass('hide'); //for manipulating something in the dom
          $('#changeImage').removeClass('hide'); //for manipulating something in the dom
          $("#customImage").addClass('hide'); //these are for manipulating something in the dom
  
          oFReader.onload = function (oFREvent) {
              document.getElementById("uploadPreview").src = oFREvent.target.result;
          };
      };
  </code></pre>
  
  <p>Everything works perfect. Now I have a Change button. I want if someone clicks on it then previous uploaded file-details to be gone. The function is something like below:</p>
  
  <pre><code>$('#changeImage').click(function(){
    $('#uploadPreview').addClass('hide');
    $('#customImage').removeClass('hide');
    //here I want to remove/clear the details about the already previous uploaded file in the 'file-input'. So the same image can be shown if someone clicks it for once again. 
  
  });
  </code></pre>
  
  <p>Can you help on this?</p>