Getting a php variable value back with an ajax result-CodePudding

I'm using croppie.js to crop user uploaded imaged, once the crop is done ajax is used to upload the result. Here is the codes for that...

Page A..

$('.upload-result').on('click', function (ev) {
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $.ajax({
            url: "uploadown/uploader.php",
            type: "POST",
            data: {"image":resp},
            success: function (data) {
                html = '<img id="cropresult" style="margin: 0px;" src="'   resp   '" />;
                $("#uploaded-input").html(html);                
            }
        });
    });
});

Then uploader.php is..

<?php 
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);
$imageName = time().'.png';
file_put_contents($imageName, $data);
?>

As you can see uploader.php is using time() for the $imageName variable.

I either need to pass $imageName back to Page A during upload or set $imageName in page A first and pass it to uploader.php at the same time as the image info.

After a few hours and many attempts having read many similar questions on here and cannot work out how to do this. Any help greatly appreciated.

CodePudding user response：

just echo the name in php or var_dump() the array and then you will be able to access it in your javascript all the data from the php page is addign to the variable name you give to the anonymous function you give to the success callback. for your case it will be accessed as data

CodePudding user response：

Found your full exmaple here: https://websolutionstuff.com/post/crop-image-before-upload-using-croppie-plugin

Consider the following PHP.

<?php 
  $data = $_POST['image'];
  list($type, $data) = explode(';', $data);
  list(, $data)      = explode(',', $data);
  $data = base64_decode($data);
  $imageName = time().'.png';
  if(file_put_contents($imageName, $data)){
    echo "Success, " . $imageName;
  } else {
    echo "Error, unable to Put file.";
  }
?>

This will provide a response to the AJAX Script.

$('.upload-result').on('click', function (ev) {
  $uploadCrop.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function (resp) {
    $.ajax({
      url: "uploadown/uploader.php",
      type: "POST",
      data: { "image":resp },
      success: function (data) {
        var response = data.split(",");
        var html;
        if(response[0] != "Error"){
          html = '<img id="cropresult" style="margin: 0px;" src="'   response[1].trim()   '" />';
          $("#uploaded-input").html(html);
        } else {
          console.log(data);
        }               
      }
    });
  });
});