save and upload data:image/jpeg;base64 string as a jpg file saying its too big

Question

I have a page lets the user display a selected image to upload and it displays it in place to preview first. It reads it as readAsDataURL. I can save the data to a text string and can upload it with getJSON or AJAX but keep getting errors saying its too big of a string? I have tried to upload it as a file but then lose the functionality of pre viewing the image first.

I can resize the image and do what I need with it once uploaded in PHP but I can struggling to get any image over 5K to be accepted.

I have done a pen, https://codepen.io/julianchamberlain/pen/PoKLvqg

I have not used this before so i apologise if I have done something wrong or not explained it clear.

I am loading an displaying image like so:

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#imagePreview').css('background-image', 'url('+e.target.result +')'); $('#imagePreview').hide(); $('#imagePreview').fadeIn(650); $('#new_img').val(e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imageUpload").change(function() { readURL(this); }); function saveimg(data) { var new_data={ new_img: data.new_img }; $.getJSON('upload.php', new_data); alert("uploaded");

 body { background: whitesmoke; font-family: 'Open Sans', sans-serif; }.container { max-width: 960px; margin: 30px auto; padding: 20px; } h1 { font-size: 20px; text-align: center; margin: 20px 0 20px; } h1 small { display: block; font-size: 15px; padding-top: 8px; color: gray; }.avatar-upload { position: relative; max-width: 205px; margin: 50px auto; }.avatar-upload.avatar-edit { position: absolute; right: 12px; z-index: 1; top: 10px; }.avatar-upload.avatar-edit input { display: none; }.avatar-upload.avatar-edit input + label { display: inline-block; width: 34px; height: 34px; margin-bottom: 0; border-radius: 100%; background: #FFFFFF; border: 1px solid transparent; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); cursor: pointer; font-weight: normal; transition: all 0.2s ease-in-out; }.avatar-upload.avatar-edit input + label:hover { background: #f1f1f1; border-color: #d6d6d6; }.avatar-upload.avatar-edit input + label:after { content: "\f040"; font-family: 'FontAwesome'; color: #757575; position: absolute; top: 10px; left: 0; right: 0; text-align: center; margin: auto; }.avatar-upload.avatar-preview { width: 192px; height: 192px; position: relative; border-radius: 100%; border: 6px solid #F8F8F8; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); }.avatar-upload.avatar-preview > div { width: 100%; height: 100%; border-radius: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }

 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet"> <script src="https://kit.fontawesome.com/788cff4036.js" crossorigin="anonymous"></script> <div class="container"> <h1>jQuery Image Upload <small>with preview</small> </h1> <div class="avatar-upload"> <div class="avatar-edit"> <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" /> <label for="imageUpload"></label> </div> <div class="avatar-preview"> <div id="imagePreview" style="background-image: url(http://i.pravatar.cc/500?img=7);"> </div> </div> </div> </div> <input type='text' id='new_img' /> <button type="button" class="button" onclick=" var new_img = document.getElementById('new_img').value; var data={new_img: new_img}; saveimg(data); saveimg(data);">Save Image</button>

I am saving the data in a text input and adding a save button like:

<input type='text' id='new_img' />
<button type="button" class="button" onclick="
var new_img = document.getElementById('new_img').value;
var data={new_img : new_img}; saveimg(data);
saveimg(data);">Save Image</button>

and to send the data I am using this but I have also tried AJAX but get same or empty results.

function saveimg(data) {
    
    var new_data={ 
    new_img : data.new_img
    };
    
    $.getJSON('upload.php', new_data);
    alert("uploaded");
    
}

The upload php is:

$new_img = $_GET["new_img"];

$data = $new_img;
list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);

file_put_contents('img/operators/image.jpg', $data);

echo "done";

Answer 1

Thanks to Andreas,

I did it with a post instead like:

 $.ajax({
            url: 'upload.php',
            data: new_data,                                                                                                  
            type: 'POST',
            success: function(data){
               alert("UPLOADED");
            }
        });

Also changed the php file to POST instead of GET.