Get data from file input in JQuery

Question

I actually have a file input and I would like to retrieve the Base64 data of the file   I tried      input myInput   0  files 0     to retrieve the data  But it only provides the name  the length  the content type but not the data itself   I actually need these data to send them to Amazon S3  I already test the API and when I send the data through html form with encode type  multipart form-data  it works   I use this plugin   http   jasny github com bootstrap javascript html fileupload  And this plugins gives me a preview of the picture and I retrieve data in the src attribute of the image preview  But when I send these data to S3 it does not work  I maybe need to encode the data like  multipart form-data  but I don t know why   Is there a way to retrieve these data without using an html form

User · Accepted Answer

You can try the FileReader API  Do something like this   x000D   x000D   lt  DOCTYPE html gt   lt html gt     lt head gt       lt script gt                function handleFileSelect                                  if   window File     window FileReader     window FileList     window Blob              alert  The File APIs are not fully supported in this browser               return                              var input   document getElementById  fileinput            if   input              alert  Um  couldn t find the fileinput element                       else if   input files              alert  This browser doesn t seem to support the  files  property of file inputs                       else if   input files 0               alert  Please select a file before clicking  Load                                      else             var file   input files 0             var fr   new FileReader              fr onload   receivedText              fr readAsText file               fr readAsBinaryString file     as bit work with base64 for example upload to server           fr readAsDataURL file                                  function receivedText             document getElementById  editor   appendChild document createTextNode fr result                                   lt  script gt     lt  head gt     lt body gt       lt input type  file  id  fileinput   gt       lt input type  button  id  btnLoad  value  Load  onclick  handleFileSelect       gt       lt div id  editor  gt  lt  div gt     lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

lt script src    fileupload fileinput min js  gt  lt  script gt    lt link href    fileupload fileinput min css  rel  stylesheet    gt    Download above files named fileinput add the path i your index page    lt div class  col-sm-9 col-lg-5  style  margin  0 0 0 8px   gt   lt input id  uploadFile1  name  file  type  file  class  file-loading           enter code here accept   pdf  multiple gt   lt  div gt    lt script gt              uploadFile1   fileinput               autoReplace  true              maxFileCount  5              lt  script gt

User · Answer

input file element    lt input type  file  id  fileinput    gt    get file     var myFile       fileinput   prop  files

User · Answer

I created a form data object and appended the file   var form   new FormData     form append  video       fileInput   0  files 0      and i got   ------WebKitFormBoundaryNczYRonipfsmaBOK Content-Disposition  form-data  name  video   filename  Wildlife wmv  Content-Type  video x-ms-wmv   in the headers sent  I can confirm this works because my file was sent and stored in a folder on my server  If you don t know how to use the FormData object there is some documentation online  but not much  Form Data Object Explination by Mozilla

User · Answer

FileReader API with jQuery  simple example    x000D   x000D    function         x000D      Add click event handler to button x000D        load-file    click  function      x000D    if     window FileReader     x000D     return alert   FileReader API is not supported by your browser      x000D      x000D    var  i        file        Put file input ID here x000D     input    i 0      Getting the element from jQuery x000D    if   input files  amp  amp  input files 0      x000D     file   input files 0      The file x000D     fr   new FileReader       FileReader instance x000D     fr onload   function      x000D         Do stuff on onload  use fr result for contents of file x000D           file-content    append       lt div  gt     html  fr result     x000D        x000D       fr readAsText  file    x000D     fr readAsDataURL  file    x000D      else   x000D        Handle errors here x000D     alert   File not selected or browser incompatible     x000D      x000D        x000D       jQuery    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  file  id  file    gt  x000D   lt input type  button  id  load-file  value  Load  gt  x000D   lt div id  file-content  gt  lt  div gt  x000D   x000D   x000D    To read as text    uncomment   fr readAsText file   line and comment fr readAsDataURL file

User · Answer

input element  of type file    lt input id  fileInput  type  file    gt    On your input change use the FileReader object and read your input file property       fileInput   on  change   function          var fileReader   new FileReader        fileReader onload   function            var data   fileReader result      data  lt -- in this var you have the file data in Base64 format            fileReader readAsDataURL     fileInput   prop  files   0          FileReader will load your file and in fileReader result you have the file data in Base64 format  also the file content-type  MIME   text plain  image jpg  etc

User · Answer

Html    lt input type  file  name  input-file  id  input-file  gt    jQuery   var fileToUpload       input-file   prop  files   0     We want to get first element only  because prop  files   returns array

[jquery] Get data from file input in JQuery

Examples related to jquery

Examples related to file

Examples related to file-upload

Examples related to base64

Examples related to html-input