How to preview selected image in input type file in popup using jQuery

Question

In my code  I am allowing the user to upload an image  Now I want to show this selected image as a preview in this same popup  How can I do it using jQuery   The following is the input type I am using in my popup window   HTML code    lt input type  file  name  uploadNewImage  gt

User · Accepted Answer

Demo   HTML     lt form id  form1  runat  server  gt      lt input type  file  id  imgInp    gt      lt img id  blah  src     alt  your image    gt   lt  form gt    jQuery  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                 imgInp   change function        readURL this         Reference

User · Answer

If your are using HTML5 then try following code snippet   lt img id  uploadPreview  style  width  100px  height  100px     gt   lt input id  uploadImage  type  file  name  myPhoto  onchange  PreviewImage       gt   lt script type  text javascript  gt       function PreviewImage             var oFReader   new FileReader            oFReader readAsDataURL document getElementById  uploadImage   files 0             oFReader onload   function  oFREvent                document getElementById  uploadPreview   src   oFREvent target result                      lt  script gt

User · Answer

You can use URL createObjectURL  x000D   x000D      function img pathUrl input               img url   0  src    window URL   URL   webkitURL  createObjectURL input files 0          x000D   img url     background   ddd    width 100px    height  90px    display  block    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt img src    id  img url  alt  your image  gt   lt br gt   lt input type  file  id  img file  onChange  img pathUrl this    gt  x000D   x000D   x000D

User · Answer

Just check my scripts it s working well       function handleFileSelect evt        var files   evt target files     FileList object         Loop through the FileList and render image files as thumbnails      for  var i   0  f  f   files i   i                Only process image files        if   f type match  image                continue                 var reader   new FileReader              Closure to capture the file information        reader onload    function theFile            return function e                 Render thumbnail            var span   document createElement  span              span innerHTML      lt img class  thumb  src     e target result                                 title     escape theFile name       gt    join                document getElementById  list   insertBefore span  null                       f             Read in the image file as a data URL        reader readAsDataURL f                document getElementById  files   addEventListener  change   handleFileSelect  false      list img    width  auto    height  100px    margin  10px

User · Answer

You can use ajax upload to preview your selected file   http   zurb com playground ajax-upload

[jquery] How to preview selected image in input type="file" in popup using jQuery?

Examples related to jquery

Examples related to html