How to preview an image before and after upload

Question

I am going to preview an image or photo in a form  but it doesn t work and the HTML code looks like this as below    lt form action    method  post  enctype  multipart form-data  name  personal image  id  newHotnessForm  gt       lt p gt  lt label for  image  gt Upload Image  lt  label gt       lt input type  file  id  imageUpload   gt  lt  p gt       lt p gt  lt button type  submit  class  button  gt Save lt  button gt  lt  p gt           lt div id  preview  gt               lt img width  160px  height  120px  src  profile pic jpg  id  thumb    gt           lt  div gt       lt  form gt    and incorporated JS code script below    lt script type  text jaavascript  gt    document  ready function        var thumb     thumb        new AjaxUpload  imageUpload        action    newHotnessForm   attr  action        name  image       onSubmit function file extension               preview   addClass  loading               onComplete function file response           thumb load function                    preview   removeClass  loading                thumb unbind                        thumb attr  src  response                         There are 2 main questions on my form  1  Why doesn t the preview of the image or picture work  2  How to paste the photo from the form when the save button is clicked  it will go link to another PHP or PHP page that I created

User · Answer

x000D   x000D  function readURL input    x000D    if  input files  amp  amp  input files 0     x000D      var reader   new FileReader    x000D   x000D      reader onload   function e    x000D            ImdID   attr  src   e target result   x000D         x000D   x000D      reader readAsDataURL input files 0    x000D      x000D    x000D  img   x000D    max-width  180px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt input type  file  onchange  readURL this      gt  x000D   lt img id  ImdID  src    alt  Image    gt  x000D   x000D   x000D

User · Answer

meVeekay s answer was good and am just making it more improvised by doing 2 things    Check whether browser supports HTML5 FileReader   or  not  Allow only image file to be upload by checking its extension    HTML     lt div id  wrapper  gt       lt input id  fileUpload  type  file    gt       lt br   gt       lt div id  image-holder  gt  lt  div gt   lt  div gt     jQuery        fileUpload   on  change   function           var imgPath     this  0  value      var extn   imgPath substring imgPath lastIndexOf        1  toLowerCase         if  extn     gif     extn     png     extn     jpg     extn     jpeg             if  typeof  FileReader      undefined                  var image holder       image-holder                image holder empty                 var reader   new FileReader                reader onload   function  e                        lt img   gt                           src   e target result                           class    thumb-image                     appendTo image holder                              image holder show                reader readAsDataURL   this  0  files 0              else               alert  This browser does not support FileReader                     else           alert  Pls select only images                For detail understanding of FileReader     Check this Article   Using FileReader   preview image before uploading

User · Answer

Try this   For Preview    lt script type  text javascript  gt      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                     lt  script gt    lt body gt       lt form id  form1  runat  server  gt           lt input type  file  onchange  readURL this      gt           lt img id  blah  src     alt  your image    gt       lt  form gt   lt  body gt    Working Demo here

User · Answer

the img page                                                      lt script src  https   code jquery com jquery-1 9 1 min js  gt  lt  script gt   lt script src  https   malsup github com jquery form js  gt  lt  script gt   lt script type  text javascript  gt        document  ready function                f   live  change   function                    fo   ajaxForm  target    d    submit                         lt  script gt   lt form id  fo  name  fo  action  nextimg php  enctype  multipart form-data  method  post  gt       lt input type  file  name  f  id  f  value  start upload    gt       lt input type  submit  name  sub  value  upload    gt   lt  form gt   lt div id  d  gt  lt  div gt                                                                                 the nextimg page                                                            lt  php       name   FILES  f    name          tmp   FILES  f    tmp name          new time    name        new  upload    new       move uploaded file  tmp  new        if   FILES  f    error    0           gt        lt h1 gt PREVIEW lt  h1 gt  lt br   gt  lt img src   lt  php echo  new   gt   width  100  height  100    gt   lt  php          gt

User · Answer

On input type file add an event onchange  quot preview   quot  For the function preview    type  thumb src URL createObjectURL event target files 0    Live example   x000D   x000D  function preview        thumb src URL createObjectURL event target files 0      x000D   lt form gt       lt input type  file  onchange  preview    gt       lt img id  thumb  src    width  150px   gt   lt  form gt  x000D   x000D   x000D

[php] How to preview an image before and after upload?

Examples related to php

Examples related to javascript

Examples related to jquery

Examples related to html