Image convert to Base64

Question

lt input type  file  id  asd   gt    I would like to get the image in base64 once the user chose that  before submitting the form   Something like      input  on  change  function      var data     this  val   base64file       it is not a plugin is just an example   alert data         I read about File API and other stuffs  I would like a simple and cross-browsers solution  IE6 IE7 excluded obviously   Any help appreciated thanks

User · Answer

lt input type  file  onchange  getBaseUrl    gt    function getBaseUrl           var file   document querySelector  input type file     files   0       var reader   new FileReader        var baseString      reader onloadend   function              baseString   reader result          console log baseString               reader readAsDataURL file

User · Answer

x000D   x000D     https   developer mozilla org en-US docs Web API FileReader readAsDataURL     Simple    function previewImage  image  preview  string          var preview       document querySelector  preview        var fileImage     image files 0        var reader        new FileReader         reader addEventListener   load   function              preview style height       100           preview title             fileImage name              convert image file to base64 string         preview src               reader result              ---             document querySelector  string   value   reader result                              false         if   fileImage                 reader readAsDataURL  fileImage              document querySelector    imageID    addEventListener   change   function          previewImage  this    imagePreviewID     imageStringID             Simple       x000D   lt form gt       File Upload   lt input type  file  id  imageID    gt  lt br   gt      Preview   lt img src     id  imagePreviewID    gt  lt br   gt          String base64   lt textarea id  imageStringID  rows  10  cols  50  gt  lt  textarea gt    lt  form gt  x000D   x000D   x000D   codesanbox

User · Answer

x000D   x000D  function readFile     x000D     x000D    if  this files  amp  amp  this files 0     x000D       x000D      var FR  new FileReader    x000D       x000D      FR addEventListener  load   function e    x000D        document getElementById  img   src         e target result  x000D        document getElementById  b64   innerHTML   e target result  x000D           x000D       x000D      FR readAsDataURL  this files 0     x000D      x000D     x000D    x000D   x000D  document getElementById  inp   addEventListener  change   readFile   x000D   lt input id  inp  type  file  gt  x000D   lt p id  b64  gt  lt  p gt  x000D   lt img id  img  height  150  gt  x000D   x000D   x000D     P S  A base64 encoded image  String   4 3 the size of the original image data   Check this answer for multiple images upload   Browser support  http   caniuse com  search file 20api More info here  https   developer mozilla org en-US docs Web API FileReader

User · Answer

Function convert image to base64 using jquery  you can convert to vanila js   Hope it help to you  Usage  input is your nameId input has file image  lt input type  quot file quot  id  quot asd quot   gt   lt button onclick  quot proccessData   quot  gt Submit lt  button gt    lt script src  quot https   cdnjs cloudflare com ajax libs jquery 3 5 1 jquery min js quot  gt  lt  script gt   lt script gt   async function converImageToBase64 inputId      let image         inputId  0   files      if  image  amp  amp  image 0         const reader   new FileReader         return new Promise resolve   gt          reader onload   ev   gt            resolve ev target result                reader readAsDataURL image 0                 async function proccessData       const image   await converImageToBase64  asd     console log image      lt  script gt   Example  converImageToBase64  yourFileInputId   https   codepen io mariohandsome pen yLadmVb

User · Answer

It s useful to work with Deferred Object in this case  and return promise   function readImage inputElement        var deferred     Deferred         var files   inputElement get 0  files      if  files  amp  amp  files 0             var fr  new FileReader            fr onload   function e                deferred resolve e target result                      fr readAsDataURL  files 0           else           deferred resolve undefined              return deferred promise        And above function could be used in this way   var inputElement      input name file     readImage inputElement  done function base64Data       alert base64Data         Or in your case     input  on  change  function      readImage   this   done function base64Data   alert base64Data

User · Answer

Exactly what you need   You can choose callback version or Promise version  Note that promises will work in IE only with Promise polyfill lib You can put this code once on a page  and this function will appear in all your files      The loadend event is fired when progress has stopped on the loading of   a resource  e g  after  error    abort   or  load  have been   dispatched    Callback version          File prototype convertToBase64   function callback                   var reader   new FileReader                    reader onloadend   function  e                        callback e target result  e target error                                         reader readAsDataURL this                           asd   on  change  function              var selectedFile   this files 0             selectedFile convertToBase64 function base64                  alert base64                               Promise version      File prototype convertToBase64   function             return new Promise function resolve  reject                    var reader   new FileReader                    reader onloadend   function  e                        resolve                         fileName  this name                        result  e target result                         error  e target error                                                               reader readAsDataURL this             bind this                 FileList prototype convertAllToBase64   function regexp            empty regexp if not set       regexp   regexp                  making array from FileList       var filesArray   Array prototype slice call this         var base64PromisesArray   filesArray             filter function file                return  regexp  test file name                map function file                return file convertToBase64                         return Promise all base64PromisesArray                   asd   on  change  function            for one file       var selectedFile   this files 0         selectedFile convertToBase64              then function obj               alert obj result                                   for all files that have file extention png  jpeg  jpg  gif       this files convertAllToBase64     png jpeg jpg gif   i  then function objArray               objArray forEach function obj  i                     console log  result     obj fileName          i            obj result                                      html   lt input type  file  id  asd  multiple  gt

[javascript] Image convert to Base64

Examples related to javascript

Examples related to jquery

Examples related to file

Examples related to input

Examples related to base64