Post multiple scr base64 img with ajax from HTML

Question

I've created an HTML page for uploading multiple images. My jQuery code get the image from input capture and subsequently show the image as preview on the page using FileReader

var container = document.getElementById(containerid),
          img = document.createElement("img"),
          reader;
          img.setAttribute("class", "prImage");
      container.appendChild(img);
      reader = new FileReader();
      reader.onload = (function (theImg) {
        return function (evt) {
          theImg.src = evt.target.result;
        };
      }(img));
      reader.readAsDataURL(file);

So in my html I have the img with base64 href

<img class="otImage" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA...

The question is, how I send the img via ajax with POST? maybe with JSON type?

Can I simply get the src image with

var image = $('#otImage').attr('src');

And then send it like this?

$('#upload').click(function(){
var imgData = JSON.stringify(image);
  $.ajax({
  url: 'http://url.com/rest/api',
  dataType: 'json',
  data: imgData,
  type: 'POST',
  success: function(data) {
    console.log(data);
    }
  });
});

Or I could convert base64 to blob?

Edit: this is not a duplicate question, I want to send a JSON preferably. And I'm asking if I can directly Send what I got. Dont mark question just because have a similar title!

You already have something called `file` which presumably is the file, why wouldn't you just send that directly in a formData object — adeneo, Jun 15 '17 at 16:48
I'd prefer to send a JSON Object, so I can add other information like token of who is upload the picture. — Trink, Jun 15 '17 at 17:10

Post multiple scr base64 img with ajax from HTML

0 Answers0