How to make a simple image upload using Javascript HTML

Question

Does any one know how to do a simple image upload and display it on the page   This is what I m looking for    User me  will choose a image The page will display the image without refreshing the page or going to another file  multiple  lt img src gt  will do because I need to display different image size    This was my code   Some of it are edited I got it from here     lt style gt         Image Designing Propoerties         thumb           height  75px          border  1px solid  000          margin  10px 5px 0 0         lt  style gt    lt script type  text javascript  gt         The uploader form          function                  file   change function                  if  this files  amp  amp  this files 0                     var reader   new FileReader                     reader onload   imageIsLoaded                  reader readAsDataURL this files 0                                           function imageIsLoaded e                myImg   attr  src   e target result               yourImage   attr  src   e target result            lt  script gt     lt input type  file    gt   lt  br gt  lt img id  myImg  src     alt  your image  height 200 width 100 gt

User · Answer

lt li class  list-group-item active  gt  lt h5 gt Feaured Image lt  h5 gt  lt  li gt               lt li class  list-group-item  gt                   lt div class  input-group mb-3  gt                       lt div class  custom-file   gt                           lt input type  file   class  custom-file-input  name  thumbnail  id  thumbnail  gt                           lt label class  custom-file-label  for  thumbnail  gt Choose file lt  label gt                       lt  div gt                   lt  div gt                   lt div class  img-thumbnail  text-center  gt                       lt img src   if isset  product     asset  storage    product- gt thumbnail     else   asset  images no-thumbnail jpeg      endif  id  imgthumbnail  class  img-fluid  alt    gt                   lt  div gt               lt  li gt   lt script gt    function        thumbnail   on  change   function         var file     this  get 0  files      var reader   new FileReader        reader readAsDataURL file 0        reader addEventListener  load   function e        var image   e target result      imgthumbnail   attr  src   image              lt  script gt

User · Answer

Try this  It supports multi file uploading       multi file upload   change function e        var file id   e target id       var file name arr   new Array        var process path   site url    public uploads         for  i   0  i  lt          file id  prop  files   length  i               var form data   new FormData            var file data           file id  prop  files   i           form data append  file name   file data            if  check multifile logo         file id  prop  files   i   name                     ajax                     url             site url    inc upload image php width 96 amp height 60 amp show small 1                   url  site url    inc upload contact info php                   cache  false                  contentType  false                  processData  false                  async  false                  data  form data                  type   post                   success  function data                           display image                                             else                       html div  html                  alert  We only accept JPG  JPEG  PNG  GIF and BMP files                          function check multifile logo file        var extension   file substr  file lastIndexOf        1       if  extension      jpg     extension      jpeg     extension      gif     extension      png     extension      bmp             return true        else           return false            Here  multi file upload is the ID of image upload field

User · Answer

Here s a simple example with no jQuery  Use URL createObjectURL  which  creates a DOMString containing a URL representing the object given in the parameter  Then  you can simply set the src of the image to that url   x000D   x000D  window addEventListener  load   function       document querySelector  input type  file     addEventListener  change   function           if  this files  amp  amp  this files 0               var img   document querySelector  img              img onload        gt                  URL revokeObjectURL img src       no longer needed  free memory                        img src   URL createObjectURL this files 0       set src to blob url                   x000D   lt input type  file    gt   lt br gt  lt img id  myImg  src     gt  x000D   x000D   x000D

User · Answer

lt img id  output image  height 50px width 50px   lt input type  file  accept  image    onchange  preview image event   gt    lt script type text javascript  gt    function preview image event        var reader   new FileReader        reader onload   function          var output   document getElementById  output image          output src   reader result            reader readAsDataURL event target files 0         lt  script gt

[javascript] How to make a simple image upload using Javascript/HTML

Examples related to javascript

Examples related to jquery

Examples related to html