通过ajax从手机到PHP的base64无法正常工作

Question

I am trying, without any success, even with researching, to have a photo taken on a mobile device, which puts into a base64 long string, and send it to a php that then uploads it a database.

The issue i am having is, getting the full base64 code to the php file. Here is my jquery code:

var imgData = localStorage.getItem('imgFile');
var propid = 213;
var tbl = 'tbl_images';
var sitch = 'images';

//console.log(imgData);

$.ajax({
   url: 'http://website.com/info/fn.php',
   dataType: 'json',
   data: JSON.stringify({'switch' : sitch, table : tbl, propid : propid, imgData : imgData}),
   type: 'POST',


    success: function(data) {
        console.log(data);

    }

});

This is how the json looks:

data%3Aimage%2Fjpeg%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAYAAACI7Fo9AAAAHGlET1QAAAACAAAAAAAAAH0AAAAoAAAAfQAAAH0AASpQSGstYwAAQABJREFUeAFsnXV7Xee17f0tbpnTpJQ0aCcOmCVZLFkWmpmZmSXbAoPMtmyZZBIzyxxmhiZpSmlTOs1pe9Jm3N94l3aa89z7x3zWXmuvvST58XjHmGPOd%2B4Bf5X0X18Kn%2F%2BF%2BDPxx%2F74m

So going to the PHP its looking like, and thus coming back, so even if it was the full length, the '%' will put it off from working.

So I would like some help on how to ensure the full code is going, and ensure its in the correct format.

Thanks in advance.

NOTE: I did not put the PHP file here, as I did not think thats the problem, it is receiving the data, but just not all of it. Based on the console, its not seeing all of the base64.

UPDATE

By removing the json.stringify as per the first answer, the raw base64 was not formatted correctly, with the wrong chars in it. If I leave it in. It does format right, and i get the full raw image data. But then my PHP file is not receiving it. I see it in console, check it against a img decoder, works fine, but the $_POST is empty ?

UPDATE 2

I have changed it from $_POST to this:

if(!$_POST) {
    $data = json_decode(file_get_contents('php://input'));
    print_r($data);
    $switch = $data->switch;
} else {
    $switch = $_POST['switch'];
}

I can see using console.log, that the full image is sent in the POST via Ajax using the code above. When i think put this into a query string, it does not take the whole binary, just a small part?

I cannot work out why it's not playing :(

Answer 1

You're telling jquery to send JSON, but then manually encoding your object. That means the data parameter, in the ajax function, as written, will just be a plain string. Since you've told jquery to send json, it'll RE-encode that string.

You should have only

data: {'switch' : sitch, table : tbl, propid : propid, imgData : imgData}

jquery will do the grunt work of converting that object to json for you.