title: Upload File and Display in the same page
body: <p>HTML:</p>
  
  <pre><code>&lt;input name="fileToUpload" type="file" id="fileToUpload"/&gt;
  &lt;div id="div1"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>$(function()
  {
     $("#fileToUpload").on('change', 'input' ,  function(){
     // Display image on the page for viewing
          readURL(this,"div1");
  
     });
  });
  
  function readURL(input , tar) {  
  if (input.files &amp;&amp; input.files[0]) { // got sth
  
      // Clear image container
      $("#" + tar ).empty(); 
  
      $.each(input.files , function(index,ff)  // loop each image 
      {
  
          var reader = new FileReader();
  
          // Put image in created image tags
          reader.onload = function (e) {
              $('#' + tar).attr('src', e.target.result);
          }
          reader.readAsDataURL(ff);
  
      });
  }   
  </code></pre>
  
  <p>I want to display the image uploaded to the div container however my code doesn't work. Any idea how to make it work?</p>