Preview an image before it is uploaded

Question

I want to be able to preview a file  image  before it is uploaded   The preview action should be executed all in the browser without using Ajax to upload the image   How can I do this

User · Answer

function assignFilePreviews            input data-previewable   true      change function             var prvCnt     this  attr  data-preview-container            if  prvCnt                if  this files  amp  amp  this files 0                     var reader   new FileReader                    reader onload   function e                        var img       lt img gt                         img attr  src   e target result                       img error function                               prvCnt  html                                                    prvCnt  html                          img appendTo prvCnt                                     reader readAsDataURL this files 0                                        document  ready function         assignFilePreviews          HTML    lt input type  file  data-previewable  true  data-preview-container   prd-img-prv    gt   lt div class    prd-img-prv  gt  lt  div gt    This also handles case when file with invalid type   ex  pdf   is choosen

User · Answer

Please take a look at the sample code below    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            blah   attr  src   e target result   x000D        x000D       x000D      reader readAsDataURL input files 0       convert to base64 string x000D      x000D    x000D   x000D      imgInp   change function     x000D    readURL this   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form runat  server  gt  x000D     lt input type  file  id  imgInp    gt  x000D     lt img id  blah  src     alt  your image    gt  x000D   lt  form gt  x000D   x000D   x000D    Also  you can try this sample here

User · Answer

Example with multiple images using JavaScript  jQuery  and HTML5  JavaScript  jQuery   function readURL input         for var i  0  i lt  input files length  i              if  input files i                 var reader   new FileReader                 reader onload   function  e                   var img       lt img id  dynamic  gt                    img attr  src   e target result                  img appendTo   form1                                reader readAsDataURL input files i                                          imgUpload   change function            readURL this               Markup  HTML    lt form id  form1  runat  server  gt       lt input type  file  id  imgUpload  multiple  gt   lt  form gt

User · Answer

The answer of LeassTaTT works well in  standard  browsers like FF and Chrome  The solution for IE exists but looks different  Here description of cross-browser solution   In HTML we need two preview elements  img for standard browsers and div for IE  HTML    lt img id  preview        src          alt          style  display none  max-width  160px  max-height  120px  border  none    gt    lt div id  preview ie  gt  lt  div gt    In CSS we specify the following IE specific thing   CSS    preview ie     FILTER  progid DXImageTransform Microsoft AlphaImageLoader sizingMethod scale        In HTML we include the standard and the IE-specific Javascripts    lt script type  text javascript  gt       include  pic preview js      lt  script gt     lt  -- if gte IE 7  gt    lt script type  text javascript  gt       include  pic preview ie js      lt  script gt      The pic preview js is the Javascript from the LeassTaTT s answer  Replace the      blah   whith the     preview   and add the     preview   show    Now the IE specific Javascript  pic preview ie js    function readURL  imgFile          var newPreview   document getElementById  preview ie      newPreview filters item  DXImageTransform Microsoft AlphaImageLoader   src   imgFile value    newPreview style width    160px     newPreview style height    120px           That s is  Works in IE7  IE8  FF and Chrome  Please test in IE9 and report  The idea of IE preview was found here  http   forums asp net t 1320559 aspx  http   msdn microsoft com en-us library ms532969 v vs 85  aspx

User · Answer

Try this   x000D   x000D  window onload   function     x000D    if  window File  amp  amp  window FileList  amp  amp  window FileReader    x000D      var filesInput   document getElementById  uploadImage    x000D      filesInput addEventListener  change   function event    x000D        var files   event target files  x000D        var output   document getElementById  result    x000D        for  var i   0  i  lt  files length  i      x000D          var file   files i   x000D          if   file type match  image    x000D            continue  x000D          var picReader   new FileReader    x000D          picReader addEventListener  load   function event    x000D            var picFile   event target  x000D            var div   document createElement  div    x000D            div innerHTML     lt img class  thumbnail  src      picFile result         x000D               title      picFile name       gt    x000D            output insertBefore div  null   x000D                      x000D          picReader readAsDataURL file   x000D          x000D   x000D          x000D      x000D    x000D   lt input type  file  id  uploadImage  name  termek file  class  file input  multiple  gt  x000D   lt div id  result  class  uploadPreview  gt  x000D   x000D   x000D

User · Answer

Default Iamge                   Html TextBoxFor x   gt  x productModels DefaultImage  new   type    file    class    form-control   onchange    openFile event     name    DefaultImage    id    DefaultImage                      Html ValidationMessageFor model   gt  model productModels DefaultImage      new    class    text-danger                          lt img src    img ApHandler png   style  height 125px  width 125px  id  DefaultImagePreview   gt               lt  div gt     lt script gt      var openFile   function  event            var input   event target           var reader   new FileReader            reader onload   function                  var dataURL   reader result              var output   document getElementById  DefaultImagePreview                output src   dataURL                     reader readAsDataURL input files 0            lt  script gt

User · Answer

TO PREVIEW MULTIPLE FILES using jquery  x000D   x000D    document  ready function            image   change function                frames   html              for  var i   0  i  lt    this  0  files length  i                      frames   append   lt img src    window URL createObjectURL this files i      width  100px  height  100px   gt                           x000D   lt head gt       lt script src  https   ajax googleapis com ajax libs jquery 3 5 1 jquery min js  gt  lt  script gt   lt  head gt   lt body gt       lt input type  file  id  image  name  image    multiple   gt  lt br  gt       lt div id  frames  gt  lt  div gt   lt  body gt  x000D   x000D   x000D

User · Answer

https   stackoverflow com a 59985954 8784402 ES2017 Way  x000D   x000D     convert file to a base64 url const readURL   file   gt        return new Promise  res  rej    gt            const reader   new FileReader            reader onload   e   gt  res e target result           reader onerror   e   gt  rej e           reader readAsDataURL file                  for demo const fileInput   document createElement  input    fileInput type    file   const img   document createElement  img    img attributeStyleMap set  max-width    320px    document body appendChild fileInput   document body appendChild img    const preview   async event   gt        const file   event target files 0       const url   await readURL file       img src   url      fileInput addEventListener  change   preview   x000D   x000D   x000D

User · Answer

In React  if the file is in your props  you can use    props value instanceof File  amp  amp         lt img src  URL createObjectURL props value    gt

User · Answer

How about creating a function that loads the file and fires a custom event  Then attach a listener to the input  This way we have more flexibility to use the file  not just for previewing images            param  domElement  input - The input element     param  string  typeData - The type of data to be return in the event object       function loadFileFromInput input typeData        var reader          fileLoadedEvent          files   input files       if  files  amp  amp  files 0             reader   new FileReader             reader onload   function  e                fileLoadedEvent   new CustomEvent  fileLoaded                    detail                       data reader result                      file files 0                                       bubbles true                  cancelable true                             input dispatchEvent fileLoadedEvent                     switch typeData                case  arraybuffer                   reader readAsArrayBuffer files 0                    break              case  dataurl                   reader readAsDataURL files 0                    break              case  binarystring                   reader readAsBinaryString files 0                    break              case  text                   reader readAsText files 0                    break                    function fileHandler  e        var data   e detail data          fileInfo   e detail file       img src   data    var input   document getElementById  inputId        img   document getElementById  imgId     input onchange   function  e        loadFileFromInput e target  dataurl        input addEventListener  fileLoaded  fileHandler    Probably my code isn t as good as some users but I think you will get the point of it  Here you can see an example

User · Answer

One-liner solution   The following code uses object URLs  which is much more efficient than data URL for viewing large images  A data URL is a huge string containing all of the file data  whereas an object URL  is just a short string referencing the file data in-memory     x000D   x000D   lt img id  blah  alt  your image  width  100  height  100    gt  x000D   x000D   lt input type  file   x000D      onchange  document getElementById  blah   src   window URL createObjectURL this files 0    gt  x000D   x000D   x000D    Generated URL will be like   blob http 3A  localhost 7514bc74-65d4-4cf0-a0df-3de016824345

User · Answer

Here is a much easy way to preview image before upload using pure javascript    profile change is the id of the input field where we choose an image document getElementById  quot profile change quot   addEventListener  quot change quot   function        Here we select the first file among the selected files  const file   this files 0      here i used a label for the input field which is an image and this image will    represent the photo selected and profile label is the id of this label    const profile label   document getElementById  quot profile label quot       Here we check if a file is selected if file          Here we bring in the FileReader which reads the file info       const reader   new FileReader               After reader loads we change the src attribute of the label to the url of the      new image selected       reader addEventListener  quot load quot   function             dp label setAttribute  quot src quot   this result                 Here we are reading the file as a url i e  we try to get the location of the      file to set that as the src of the label which we did above       reader readAsDataURL file     else         Here we simply set the src as default  whatever you want if no file is selected      dp label setAttribute  quot src quot    quot as you want quot          And here is the HTML   lt label for  quot profile change quot  gt               lt img title  quot Change Profile Photo quot  id  quot profile label quot                src  quot as you want quot  alt  quot DP quot  style  quot height  150px  width  150px                  border-radius  50   quot   gt   lt  label gt   lt input style  quot display  none  quot  id  quot profile change quot  name  quot DP quot  type  quot file quot  class  quot detail form-control quot  gt

User · Answer

Here s a solution if you re using React   import   as React from  react  import   useDropzone   from  react-dropzone   function imageDropper       const  imageUrl  setImageUrl    React useState     const  imageFile  setImageFile    React useState      const onDrop   React useCallback      acceptedFiles   gt          const file   acceptedFiles 0        setImageFile file            convert file to data  url       const reader   new FileReader         reader addEventListener  load        gt  setImageUrl String reader result    false        reader readAsDataURL file              setImageFile  setImageUrl        const   getRootProps  getInputProps  isDragActive     useDropzone   onDrop       return        lt div gt         lt div     getRootProps    gt           imageFile   imageFile name                isDragActive    lt p gt Drop files here    lt  p gt     lt p gt Select image file    lt  p gt            lt input     getInputProps      gt         lt  div gt         imageUrl  amp  amp             lt div gt            Your image   lt img src  imageUrl    gt           lt  div gt                lt  div gt

User · Answer

This is size improvement of cmlevy answer - try  x000D   x000D   lt input type file oninput  pic src window URL createObjectURL this files 0    gt   lt img id  pic    gt  x000D   x000D   x000D

User · Answer

For Multiple image upload  Modification to the  IvanBaev s Solution   function readURL input        if  input files  amp  amp  input files 0             var i          for  i   0  i  lt  input files length    i              var reader   new FileReader              reader onload   function  e                      form1   append   lt img src    e target result    gt                           reader readAsDataURL input files i                        http   jsfiddle net LvsYc 12330   Hope this helps someone

User · Answer

Here s a multiple files version  based on Ivan Baev s answer   The HTML   lt input type  file  multiple id  gallery-photo-add  gt   lt div class  gallery  gt  lt  div gt    JavaScript   jQuery    function            Multiple images preview in browser     var imagesPreview   function input  placeToInsertImagePreview             if  input files                var filesAmount   input files length               for  i   0  i  lt  filesAmount  i                      var reader   new FileReader                     reader onload   function event                            parseHTML   lt img gt     attr  src   event target result  appendTo placeToInsertImagePreview                                      reader readAsDataURL input files i                                             gallery-photo-add   on  change   function             imagesPreview this   div gallery                  Requires jQuery 1 8 due to the usage of   parseHTML  which should help with XSS mitigation   This will work out of the box  and the only dependancy you need is jQuery

User · Answer

What about this solution   Just add the data attribute  data-type editable  to an image tag like this    lt img data-type  editable  id  companyLogo  src  http   www coventrywebgraphicdesign co uk wp-content uploads logo-here jpg  height  300px  width  300px    gt    And the script to your project off course     function init            img data-type editable    each function  i  e            var  inputFile       lt input  gt                 attr  type    file                attr  hidden    hidden                attr  onchange    readImage                  attr  data-image-placeholder   e id              e parentElement  append  inputFile              e  on  click    inputFile  triggerClick              function triggerClick e        e data click       Element prototype readImage   function          var  inputFile   this      if   inputFile  amp  amp   inputFile files  amp  amp   inputFile files 0             var  fileReader   new FileReader             fileReader onload   function  e                var  imagePlaceholder    inputFile attributes getNamedItem  data-image-placeholder   value              var  img            imagePlaceholder                img attr  src   e target result                       fileReader readAsDataURL  inputFile files 0                     IIFE - Immediately Invoked Function Expression    https   stackoverflow com questions 18307078 jquery-best-practises-in-case-of-document-ready    function  yourcode         use strict          The global jQuery object is passed as a parameter     yourcode window jQuery  window  document       function     window  document         use strict          The   is now locally scoped        function                 The DOM is ready          init                    The rest of your code goes here         See demo at JSFiddle

User · Answer

Yes  It is possible   Html   lt input type  file  accept  image     onchange  showMyImage this     gt    lt br  gt   lt img id  thumbnil  style  width 20   margin-top 10px    src    alt  image   gt    JS   function showMyImage fileInput            var files   fileInput files          for  var i   0  i  lt  files length  i                             var file   files i               var imageType    image                      if   file type match imageType                     continue                                       var img document getElementById  thumbnil                            img file   file                  var reader   new FileReader                reader onload    function aImg                     return function e                         aImg src   e target result                                      img               reader readAsDataURL file                         You can get Live Demo from here

User · Answer

Clean and simple JSfiddle  This will be useful when you want The event to triggered indirectly from a div or a button    lt img id  image-preview   style  height 100px  width 100px    src     gt    lt input style  display none  id  input-image-hidden  onchange  document getElementById  image-preview   src   window URL createObjectURL this files 0    type  file  accept  image jpeg  image png  gt    lt button  onclick  HandleBrowseClick  input-image-hidden      gt UPLOAD IMAGE lt  button gt     lt script type  text javascript  gt  function HandleBrowseClick hidden input image        var fileinputElement   document getElementById hidden input image       fileinputElement click            lt  script gt

User · Answer

lt img id  quot blah quot  alt  quot your image quot  width  quot 100 quot  height  quot 100 quot    gt   lt input type  quot file quot  name  quot photo quot  id  quot fileinput quot    gt   lt script gt      fileinput   change function     var url   window URL createObjectURL this files 0         blah   attr  src  url        lt  script gt

User · Answer

THIS IS THE SIMPLEST METHOD  To PREVIEW the image before uploading it to the SERVER from the Browser without using Ajax or any complicated functions   It needs an  quot onChange quot  event to load the image   x000D   x000D  function preview         frame src URL createObjectURL event target files 0      x000D   lt form gt     lt input type  file  onchange  preview    gt     lt img id  frame  src    width  100px  height  100px   gt   lt  form gt  x000D   x000D   x000D   To preview multiple image click here

User · Answer

Preview multiple images before it is uploaded using jQuery javascript    This will preview multiple files as thumbnail images at a time  Html   lt input id  ImageMedias  multiple  multiple  name  ImageMedias  type  file  accept   jfif  jpg  jpeg  png  gif  class  custom-file-input   value    gt                                       lt div id  divImageMediaPreview  gt  lt  div gt    Script      ImageMedias   change function          if  typeof  FileReader      undefined             var dvPreview       divImageMediaPreview            dvPreview html                              this  0  files  each function                  var file     this                                   var reader   new FileReader                    reader onload   function  e                        var img       lt img   gt                         img attr  style    width  150px  height 100px  padding  10px                        img attr  src   e target result                       dvPreview append img                                     reader readAsDataURL file 0                                      else           alert  This browser does not support HTML5 FileReader                 Working Demo on Codepen  Working Demo on jsfiddle  I hope this will help

User · Answer

I have edited  Ivan s answer to display  No Preview Available  image  if it is not an image   function readURL input        var url   input value      var ext   url substring url lastIndexOf        1  toLowerCase        if  input files  amp  amp  input files 0  amp  amp   ext     gif     ext     png     ext     jpeg     ext     jpg              var reader   new FileReader             reader onload   function  e                    imagepreview   attr  src   e target result                      reader readAsDataURL input files 0         else               imagepreview   attr  src     assets no preview png

User · Answer

I have made a plugin which can generate the preview effect in IE 7  thanks to the internet  but has few limitations  I put it into a github page so that its easier to get it   x000D   x000D    function      x000D       input name file1    previewimage   x000D     div    preview   x000D     imgwidth  180  x000D     imgheight  120 x000D        x000D       input name file2    previewimage   x000D     div    preview2   x000D     imgwidth  90  x000D     imgheight  90 x000D        x000D       x000D   preview  gt  div   x000D    display  inline-block  x000D    text-align center  x000D    x000D   x000D   preview2  gt  div   x000D    display  inline-block   x000D    text-align center  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   rawgit com andrewng330 PreviewImage master preview image min js  gt  lt  script gt  x000D   Preview x000D    lt div class  preview  gt  lt  div gt  x000D   Preview2 x000D    lt div class  preview2  gt  lt  div gt  x000D   x000D    lt form action     method  POST  enctype  multipart form-data  gt  x000D     lt input type  file  name  file1  gt  x000D     lt input type  file  name  file2  gt  x000D     lt input type  submit  gt  x000D    lt  form gt  x000D   x000D   x000D

User · Answer

It s my code Support IE 6-9  chrome 17  firefox Opera 11  Maxthon3   x000D   x000D      x000D  function previewImage fileObj  imgPreviewId    x000D      var allowExtention     jpg  bmp  gif  png      allowed to upload file type x000D      document getElementById  hfAllowPicSuffix   value  x000D      var extention   fileObj value substring fileObj value lastIndexOf        1  toLowerCase    x000D      var browserVersion   window navigator userAgent toUpperCase    x000D      if  allowExtention indexOf extention   gt  -1    x000D          if  fileObj files    x000D              if  window FileReader    x000D                  var reader   new FileReader    x000D                  reader onload   function  e    x000D                      document getElementById imgPreviewId  setAttribute  src   e target result   x000D                     x000D                  reader readAsDataURL fileObj files 0    x000D                else if  browserVersion indexOf  SAFARI    gt  -1    x000D                  alert  don t support  Safari6 0 below broswer    x000D                x000D            else if  browserVersion indexOf  MSIE    gt  -1    x000D              if  browserVersion indexOf  MSIE 6    gt  -1     ie6 x000D                  document getElementById imgPreviewId  setAttribute  src   fileObj value   x000D                else    ie 7-9  x000D                  fileObj select    x000D                  fileObj blur     x000D                  var newPreview   document getElementById imgPreviewId   x000D   x000D                  newPreview style border    solid 1px  eeeeee   x000D                  newPreview style filter    progid DXImageTransform Microsoft AlphaImageLoader sizingMethod  scale  src      document selection createRange   text         x000D                  newPreview style display    block   x000D   x000D                x000D            else if  browserVersion indexOf  FIREFOX    gt  -1     firefox x000D              var firefoxVersion   parseFloat browserVersion toLowerCase   match  firefox     d       1    x000D              if  firefoxVersion  lt  7     firefox7 below x000D                  document getElementById imgPreviewId  setAttribute  src   fileObj files 0  getAsDataURL     x000D                else    firefox7 0    x000D                  document getElementById imgPreviewId  setAttribute  src   window URL createObjectURL fileObj files 0     x000D                x000D            else   x000D              document getElementById imgPreviewId  setAttribute  src   fileObj value   x000D            x000D        else   x000D          alert  only support    allowExtention    suffix    x000D          fileObj value         clear Selected file x000D          if  browserVersion indexOf  MSIE    gt  -1    x000D              fileObj select    x000D              document selection clear    x000D            x000D   x000D        x000D    x000D  function changeFile elem    x000D        file object   preview img tag id x000D      previewImage elem  imagePreview   x000D    x000D   lt input type  file   id  netBarBig   onchange  changeFile this      gt  x000D   lt img  src    id  imagePreview  style  width 120px height 80px   alt     gt  x000D   x000D   x000D

User · Answer

Following is the working code    lt input type  file  onchange  readURL this      gt    lt img id  ShowImage  src       gt    Javascript    function readURL input            if  input files  amp  amp  input files 0                 var reader   new FileReader                 reader onload   function  e                        ShowImage                        attr  src   e target result                       width 150                       height 200                               reader readAsDataURL input files 0

User · Answer

for my app  with encryped GET url parameters  only this worked  I always got a TypeError         is null  Taken from https   developer mozilla org en-US docs Web API FileReader readAsDataURL   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 addEventListener  load   function      x000D      preview src   reader result  x000D       false   x000D   x000D    if  file    x000D      reader readAsDataURL file   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

There are a couple ways you can do this  The most efficient way would be to use URL createObjectURL   on the File from your  lt input gt    Pass this URL to img src to tell the browser to load the provided image    Here s an example    x000D   x000D   lt input type  file  accept  image    onchange  loadFile event   gt  x000D   lt img id  output   gt  x000D   lt script gt  x000D    var loadFile   function event    x000D      var output   document getElementById  output    x000D      output src   URL createObjectURL event target files 0    x000D      output onload   function     x000D        URL revokeObjectURL output src     free memory x000D        x000D       x000D   lt  script gt  x000D   x000D   x000D    You can also use FileReader readAsDataURL   to parse the file from your  lt input gt    This will create a string in memory containing a base64 representation of the image    x000D   x000D   lt input type  file  accept  image    onchange  loadFile event   gt  x000D   lt img id  output   gt  x000D   lt script gt  x000D    var loadFile   function event    x000D      var reader   new FileReader    x000D      reader onload   function    x000D        var output   document getElementById  output    x000D        output src   reader result  x000D         x000D      reader readAsDataURL event target files 0    x000D       x000D   lt  script gt  x000D   x000D   x000D

[javascript] Preview an image before it is uploaded

Examples related to javascript

Examples related to jquery

Examples related to file-upload