How to post an image in base64 encoding via .ajax?

Thanks for all the answers which helped me along.

I had also posted the question to the forums on (more Project Oxford specific) and between their answers and your’s I’ve got a solution.

  1. You need to send a Blob
  2. You need to set the processData:false and contentType: 'application/octet-stream' options in the .ajax call

So my solution looks like this

First a function to make the blob (This is copied verbatim from someone more gifted than I)

makeblob = function (dataURL) {
            var BASE64_MARKER = ';base64,';
            if (dataURL.indexOf(BASE64_MARKER) == -1) {
                var parts = dataURL.split(',');
                var contentType = parts[0].split(':')[1];
                var raw = decodeURIComponent(parts[1]);
                return new Blob([raw], { type: contentType });
            var parts = dataURL.split(BASE64_MARKER);
            var contentType = parts[0].split(':')[1];
            var raw = window.atob(parts[1]);
            var rawLength = raw.length;

            var uInt8Array = new Uint8Array(rawLength);

            for (var i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);

            return new Blob([uInt8Array], { type: contentType });

and then

    url: '' + $.param(params),
    type: 'POST',
    processData: false,
    contentType: 'application/octet-stream',
    data: makeblob('data:image/jpeg;base64,9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z'
.done(function(data) {alert("success");})
.fail(function() {alert("error");});

Leave a Comment