post base64 encode image to server using javascript

Question

upload image to server ,image is from ,then i want to post image to server through ajax, server side using python flask framework, it needs base64 encoding format ,the question is how can i use javascript to convert image to base64 format.

 $('.img-upload-btn').click(function(event) {
  $("#img-upload").click();
 });

 $('#img-upload').on('change', function(event) {
  event.preventDefault();
  var img = $("#img-upload")[0].files[0];
  console.log(toDataUrl(img.name));

  var img_data = {
   "spec_id": 212,
   "file": img
  };
  console.log(img);
  $.ajax({
   url: 'http://10.0.0.75:5000/api/check_specification',
   type: 'POST',
   dataType: 'json',
   contentType: "application/json; charset=utf-8",
   success: function(data) {
    alert(data);
   },

   failure:function(errorMsg) {
    alert(errorMsg);
   }
  });
  
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-search full-width img-upload-btn">upload-img</button>
<input type="file" id="img-upload" >

Possible duplicate of [How can you encode a string to Base64 in JavaScript?](http://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript) — Sami Kuhmonen, Mar 03 '17 at 07:31

score 6 · Accepted Answer · answered Mar 10 '17 at 11:16

Something like this you can get image in base64.

fileChange(e) {
    /* any way to get the object input */
    var file    = document.querySelector('input[type=file]');
    let reader = new FileReader();
    if(file.files[0]) {
        reader.onload = () => {
        imgBase64 = reader.result;
        console.log(reader.result);
        //your request
      }
      reader.readAsDataURL(file[0]);
    }
}

post base64 encode image to server using javascript

1 Answers1

Linked