Ajax not post base64 data of large image

Question

I am passing Image base64 data through ajax to my php function, but for large size image Ajax does not post the data. But the same code works perfectly for small images.

srcdata=data:image/jpeg;base64,/9j/4SxvRXhpZgAASUkqAAgAAAANAAABBAABAAAAwAwAAAEBBAABAAAALAcAAA8BAgAIAAAAqgAAABABAgARAAAAsgAAABIBAwABAAAABgAAABoBBQABAAAAxAAAABsBBQABAAAAzAAAACgBAwABAAAAAgAAADEBAgAMAAAA1AAAADIBAgAUAAAA4AAAABMCAwABAAAAAQAAAGmHBAABAAAA9AAAACWIBAABAAAA3gkAAPAJAABTQU1TVU5HAFNBTVNVTkctU0dILUk1MzcAAEgAAAABAAAASAAAAAEAAABJNTM3VUNVQ05DOQAyMDE0OjA2OjIyIDEwOjE3OjEwACEAmoIFAAEAAACGAgAAnYIFAAEAAACOAgAAIogDAAEAAAADAAAAJ4gDAAEAAAB9AAAAAJAHAAQAAAAwMjIwA5ACABQAAACWAgAABJACABQAAACqAgAAAZEHAAQAAAABAgMAAZIKAAEAAAC AgAAApIFAAEAAADGAgAAA5IKAAEAAADOAgAABJIKAAEAAADWAgAABZIFAAEAAADeAgAAB5IDAAEAAAACAAAACJIDAAEAAAAAAAAACZIDAAEAAAAAAAAACpIFAAEAAADmAgAAfJIHAGIAAABeCQAAhpIHAFwGAADuAgAAAKAHAAQAAAAwMTAwAaADAAEAAAABAAAAAqAEAAEAAADADAAAA6AEAAEAAAAsBwAABaAEAAEAAADACQAAF6IDAAEAAAACAAAAAaMDAAEAAAABAAAAAqQDAAEAAAAAAAAAA6QDAAEAAAAAAAAABKQFAAEAAABKCQAABqQDAAEAAAAAAAAACaQDAAEAAAAAAAAACqQDAAEAAAAAAAAAIKQCAAsAAABSCQAAAAAAAAEAAAAUAAAABAEAAGQAAAAyMDE0OjA2OjIyIDEwOjE3OjEwADIwMTQ6MDY6MjIgMTA6MTc6MTAAAQAAABQAAAAUAQAAZAAAAFAAAAABAAAAAAAAAAoAAAAUAQAAZAAAAHIBAABkAAAAQVNDSUkAAABLSktKFwUHhQABAF4AAQAAAAAAAAAAkaMAAQAAAAFYZAABAAAAAFJqAAT4awAFib0AAhBHAAAAAAAAT6EAAQAAAAGFbQABTIgAAQAAAAGAPQAB1GYAAR/F//8L1QAAzfH//yRxAAENngAAFK4AAErK// giAABS0pLSmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGVXEABVVxAAVVcQAFmWAACWZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABZlwAAlmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAWZcAAJZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABlVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFmXAACWZxAAZmcQAGZnEABmZxAAZmcQAGZnEABplwAAlVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABZlwAAlmcQAGZnEABmZxAAZmcQAGZnEABmZxAAaZcAAJVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAWZcAAJZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGmXAACVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFmXAACWZxAAZmcQAGZnEABmZxAAZmcQAGZnEABplwAAlVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABZlwAAlmcQAGZnEABmZxAAZmcQAGZnEABmZxAAaZcAAJVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAWZcAAJmXAACWZxAAZmcQAGZnEABmZxAAZmcQAGmXAACVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFmWAACZlwAAlmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABZlgAAmZcAAJZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAYRUAABmXAACWZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZLSktKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASLAAAf/8AACRQAABVo8AAf/3AAB25wABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAATv8AAf/2AACFNwABTv8AAf/2AACFNwABT5QAAf/2AACFXgABT5QAAf/2AACFXgABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEtKABYAAEZBRkEAHIjEAAEAHOcsAAEAMRzRAAIARn5sAAIAWwYuAAMAcAgFAAMAmtFlAAEAmnjxAAEAmpN5AAEAjPohAAEAfnrCAAIAcNwgAAIAYjlTAAMAVDJzAAMARuH8AAIAVOH8AAIBgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAAAAAAARkFGQQADAD8AAwArAABGQUZBABg8AAAAPAAAAFMwOFFFTENHQzAxAAcAAQAHAAQAAAAwMTAwAgAEAAEAAAAAIAEADAAEAAEAAAAAAAAAEAAFAAEAAABaAAAAQAAEAAEAAAAAAAAAUAAEAAEAAAABAAAAAAEDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAgABAAIABAAAAFI5OAACAAcABAAAADAxMDAAAAAAAQAAAAEABAAAAAICAAAAAAAACQAAAQQAAQAAAAABAAABAQQAAQAAAJAAAAADAQMAAQAAAAYAAAASAQMAAQAAAAYAAAAaAQUAAQA `

data is too large so partially posted ,

ajax

count = 1;
name='test'
jQuery.ajax({
    url:"/createImage.php",
    data:{img_data:srcdata,img_id:count,name:name},
    type:"POST",
    contentType:"application/x-www-form-urlencoded",
    success:function(result)
    {
        alert(result);
    }
});

PHP

print_r($_POST); // is empty when logging..

When I'm trying to get the post data in php I am getting empty . What could be the reason for ajax not sending the data when base64 is used.

Answer 1

First of all: the code that you indicate in base64 returns a corrupted image; when you send the code in base64, uses the function encodeURIComponent to avoid errors when sending.

Try this code:

	var srcdata = "data:image/jpeg;base64,/9j/4SxvRXhpZgAASUkqAAgAAAANAAABBAABAAAAwAwAAAEBBAABAAAALAcAAA8BAgAIAAAAqgAAABABAgARAAAAsgAAABIBAwABAAAABgAAABoBBQABAAAAxAAAABsBBQABAAAAzAAAACgBAwABAAAAAgAAADEBAgAMAAAA1AAAADIBAgAUAAAA4AAAABMCAwABAAAAAQAAAGmHBAABAAAA9AAAACWIBAABAAAA3gkAAPAJAABTQU1TVU5HAFNBTVNVTkctU0dILUk1MzcAAEgAAAABAAAASAAAAAEAAABJNTM3VUNVQ05DOQAyMDE0OjA2OjIyIDEwOjE3OjEwACEAmoIFAAEAAACGAgAAnYIFAAEAAACOAgAAIogDAAEAAAADAAAAJ4gDAAEAAAB9AAAAAJAHAAQAAAAwMjIwA5ACABQAAACWAgAABJACABQAAACqAgAAAZEHAAQAAAABAgMAAZIKAAEAAAC AgAAApIFAAEAAADGAgAAA5IKAAEAAADOAgAABJIKAAEAAADWAgAABZIFAAEAAADeAgAAB5IDAAEAAAACAAAACJIDAAEAAAAAAAAACZIDAAEAAAAAAAAACpIFAAEAAADmAgAAfJIHAGIAAABeCQAAhpIHAFwGAADuAgAAAKAHAAQAAAAwMTAwAaADAAEAAAABAAAAAqAEAAEAAADADAAAA6AEAAEAAAAsBwAABaAEAAEAAADACQAAF6IDAAEAAAACAAAAAaMDAAEAAAABAAAAAqQDAAEAAAAAAAAAA6QDAAEAAAAAAAAABKQFAAEAAABKCQAABqQDAAEAAAAAAAAACaQDAAEAAAAAAAAACqQDAAEAAAAAAAAAIKQCAAsAAABSCQAAAAAAAAEAAAAUAAAABAEAAGQAAAAyMDE0OjA2OjIyIDEwOjE3OjEwADIwMTQ6MDY6MjIgMTA6MTc6MTAAAQAAABQAAAAUAQAAZAAAAFAAAAABAAAAAAAAAAoAAAAUAQAAZAAAAHIBAABkAAAAQVNDSUkAAABLSktKFwUHhQABAF4AAQAAAAAAAAAAkaMAAQAAAAFYZAABAAAAAFJqAAT4awAFib0AAhBHAAAAAAAAT6EAAQAAAAGFbQABTIgAAQAAAAGAPQAB1GYAAR/F//8L1QAAzfH//yRxAAENngAAFK4AAErK// giAABS0pLSmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGVXEABVVxAAVVcQAFmWAACWZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABZlwAAlmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAWZcAAJZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABlVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFmXAACWZxAAZmcQAGZnEABmZxAAZmcQAGZnEABplwAAlVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABZlwAAlmcQAGZnEABmZxAAZmcQAGZnEABmZxAAaZcAAJVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAWZcAAJZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGmXAACVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFmXAACWZxAAZmcQAGZnEABmZxAAZmcQAGZnEABplwAAlVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABZlwAAlmcQAGZnEABmZxAAZmcQAGZnEABmZxAAaZcAAJVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAWZcAAJmXAACWZxAAZmcQAGZnEABmZxAAZmcQAGmXAACVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFmWAACZlwAAlmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGVXEABVVxAAVVcQAFVXEABVVxAAVVcQAFVXEABZlgAAmZcAAJZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAYRUAABmXAACWZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZmcQAGZnEABmZxAAZLSktKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASLAAAf/8AACRQAABVo8AAf/3AAB25wABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAATv8AAf/2AACFNwABTv8AAf/2AACFNwABT5QAAf/2AACFXgABT5QAAf/2AACFXgABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEtKABYAAEZBRkEAHIjEAAEAHOcsAAEAMRzRAAIARn5sAAIAWwYuAAMAcAgFAAMAmtFlAAEAmnjxAAEAmpN5AAEAjPohAAEAfnrCAAIAcNwgAAIAYjlTAAMAVDJzAAMARuH8AAIAVOH8AAIBgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAABgQAAAAAAAAAARkFGQQADAD8AAwArAABGQUZBABg8AAAAPAAAAFMwOFFFTENHQzAxAAcAAQAHAAQAAAAwMTAwAgAEAAEAAAAAIAEADAAEAAEAAAAAAAAAEAAFAAEAAABaAAAAQAAEAAEAAAAAAAAAUAAEAAEAAAABAAAAAAEDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAgABAAIABAAAAFI5OAACAAcABAAAADAxMDAAAAAAAQAAAAEABAAAAAICAAAAAAAACQAAAQQAAQAAAAABAAABAQQAAQAAAJAAAAADAQMAAQAAAAYAAAASAQMAAQAAAAYAAAAaAQUAAQA `";

	var count = 1;
	var name = 'test';

	$.ajax({
		type: "POST",
		url: "./createImage.php",
		data: { img_data:srcdata, img_id:count, name:name },
		cache: false,
		contentType: "application/x-www-form-urlencoded",
		success: function (result) {
			alert(result);
		}

	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

I agree with TrueBlueAussie. This looks like a server side setting in PHP.

Open you php.ini file and find the line stating upload_max_filesize. The default it set to 2M, which is 2MB. Try increasing it to 3MB and see if you are still receiving the error.

Note: You'll need to restart Apache/Nginx/webserver for this to take affect from the php.ini file.

Even though you are sending the file as a variable, the application/x-www-form-urlencoded might be interpreted in PHP as being an actual file upload. The other php.ini setting you can take a look at will be post_max_size which has a default of 8M, which is the maximum that you can POST to your PHP script.