Show file preview of input

Show file preview of input

I'm trying to show a simple preview of a file, once it is selected in a form input.  The image that I am trying to write a source to is appended after the page is loaded but before the image is displayed.

  1. <form>
  2.     <div>
  3.         <div>
  4.             <input type="file">
  5.         </div>
  6.          ...
  7.         <img class="preview" src="#" alt="Preview Image" />
  8.     </div>
  9. </form>

  2. function myFiles(files) {  // files is the selected file
  3.     console.log('File: ' , files[0]);  // has name, type, size, etc.
  4.     var ipreview = $(self).parent().parent().find('.preview');  // $self is the input tag
  5.     console.log('Ipreview: ' , ipreview); // It's targeting the image node
  6.     ipreview.src = URL.createObjectURL(files[0]);
  7.     console.log('Src: ' , ipreview.src);  // Shows something like this:  Src:  – "blob:http://mysite.com/a3486686-0995-43dc-9397-67d9b5f92614"
  8. }

What am I doing wrong?