title: Dynamically change the image by uploading it with preview
body: <p>what I want is- <strong>(wysiwyg editor only for image)</strong> when user click on any image of my html page then the "choose file" button option should come up, without writing  any tags and I don't want to upload that image to the server so no need to use php or any other just want to preview it.
  what I have done to achieve this </p>
  
  <pre><code>//image that already there in html page
  &lt;div id="headshot" class="quickFade"&gt;
    &lt;img id="blah" src="#" alt="your image" /&gt;
  &lt;/div&gt;
  //grab the id of parent element of clicked image
  $('img').click(function(event){
    if (event.target.nodeName == 'IMG'){
      var pratik = event.target.parentNode.id; 
  
  // creates &lt;input type="file" id="imgInp"&gt;  
  
  var newElem = document.createElement('input');
      newElem.type = "file";      
      newElem.id = "imgInp";
  
      document.getElementById(pratik).appendChild(newElem);
    }
  })
  
  // preview the image after uploading the image and then remove the "choose file" button 
  function readURL(input) {
    if (input.files &amp;&amp; input.files[0]) {
      var reader = new FileReader();
  
      reader.onload = function(e) {
        $('#blah').attr('src', e.target.result);
      }
  
      reader.readAsDataURL(input.files[0]);
    }
  }
  
  $('#imgInp').change(function() {
  
  document.getElementById("imgInp").remove();
    readURL(this);
  });
  </code></pre>
  
  <p>this whole code dynamically generate <code>&lt;input type="file" id="imgInp"&gt;</code> below  <code>&lt;img id="blah" src="#" alt="your image" /&gt;</code> so this will like this </p>
  
  <pre><code>&lt;div id="headshot" class="quickFade"&gt;
    &lt;img id="blah" src="#" alt="your image" /&gt;
  &lt;input type="file" id="imgInp"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>upload process is working find but preview and removing the button after preview functionalities are not working</p>
  
  <p>but when I manually put this code  <code>&lt;input type="file" id="imgInp"&gt;</code>  by editing html file then removing the button after preview functionalities are working.
  infect the functionalities are not dependence upon this code <code>&lt;input type="file" id="imgInp"&gt;</code> position I means I can put anywhere I want and still getting preview and removing functionalities are working but when this code <code>&lt;input type="file" id="imgInp"&gt;</code>is code dynamically appeared through above JavaScript then this problem is arising</p>