HTML input type file get the image before submitting the form

Question

I m building a basic social network and in the registration the user uploads a display image  Basically I wanted to display the image  like a preview on the same page as the form  just after they select it and before the form is submitted   Is this possible

User · Answer

this can be done very easily with HTML 5  see this link http   www html5rocks com en tutorials file dndfiles

User · Answer

I feel we had a related discussion earlier  How to upload preview image before upload through JavaScript

User · Answer

I found This simpler yet powerful tutorial which uses the fileReader Object  It simply creates an img element and  using the fileReader object  assigns its source attribute as the value of the form input   x000D   x000D  function previewFile     x000D    var preview   document querySelector  img    x000D    var file      document querySelector  input type file    files 0   x000D    var reader    new FileReader    x000D   x000D    reader onloadend   function      x000D      preview src   reader result  x000D      x000D   x000D    if  file    x000D      reader readAsDataURL file   x000D      else   x000D      preview src       x000D      x000D    x000D   lt input type  file  onchange  previewFile    gt  lt br gt  x000D   lt img src    height  200  alt  Image preview     gt  x000D   x000D   x000D

User · Answer

Here is the complete example for previewing image before it gets upload   HTML     lt html gt   lt head gt   lt link class  jsbin  href  http   ajax googleapis com ajax libs jqueryui 1 themes base jquery-ui css  rel  stylesheet  type  text css    gt   lt script class  jsbin  src  http   ajax googleapis com ajax libs jquery 1 jquery min js  gt  lt  script gt   lt script class  jsbin  src  http   ajax googleapis com ajax libs jqueryui 1 8 0 jquery-ui min js  gt  lt  script gt   lt meta charset utf-8   gt   lt title gt JS Bin lt  title gt   lt  -- if IE  gt   lt script src  http   goo gl r57ze  gt  lt  script gt   lt   endif -- gt   lt  head gt   lt body gt   lt input type  file  onchange  readURL this      gt   lt img id  blah  src     alt  your image    gt   lt  body gt   lt  html gt    JavaScript     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           width 150           height 200              reader readAsDataURL input files 0

User · Answer

Image can not be shown until it serves from any server  so you need to upload the image to your server to show its preview

[javascript] HTML input type=file, get the image before submitting the form

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to file-io