title: load img file into img tag with jQuery
body: <p>HTML:</p>
  
  <pre><code>&lt;input type="file" id="myFile"&gt;
  &lt;button id="pushKnop" type="button"&gt;Push&lt;/button&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>if($('#myFile').val() != ""){
          e.preventDefault();
          pushNummer++;
          var push_structure2 = $('&lt;br&gt;&lt;div class="push"&gt;&lt;a href="profiel.html"&gt;&lt;div id="pushPersoon"&gt;&lt;img src="img/pf.jpg"/&gt;&lt;h1&gt;Martijn Garritsen:&lt;/h1&gt;&lt;/div&gt;&lt;/a&gt;&lt;div class="pushTextStuk pushNummer' + pushNummer + '"&gt;&lt;p class="pushNummer"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;');
          $('#pushesKader').prepend(push_structure2);
          $('.pushNummer' + pushNummer).append('&lt;img src=" " id="pushFoto'+pushNummer+'"/&gt;');
        }
  </code></pre>
  
  <p>So if someone would choose a file and hit the button there would appear a new div on the website with a <code>&lt;img&gt;</code> tag in it but now I'm looking for a way to get the file(this would be a img) they have chosen to be displayed in that div, so to get it inside the src="" in the img tag.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>$('#myFile').on('change', function(){
        var input = $(this)[0];
        var file = input.files[0];
        var reader = new FileReader();
          reader.readAsDataURL(file);
        reader.onload = function(e){
           $('#pushFoto' + pushNummer).attr('src', e.target.result);
         }
      });
  </code></pre>