使用 ajax 结果取回 php 变量值

Question

我正在使用 croppie.js 裁剪用户上传的图片，裁剪完成后 ajax 用于上传结果。这是代码...

页面 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);                
            }
        });
    });
});

那么uploader.php就是..

<?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);
?>

如您所见，uploader.php 正在使用 time() 作为 $imageName 变量。

我要么需要在上传过程中将 $imageName 传回页面 A 要么先在A页面设置$imageName，和图片信息同时传给uploader.php

经过几个小时和多次尝试，阅读了此处的许多类似问题，但无法弄清楚如何做到这一点。非常感谢任何帮助。

Answer 1

只需 echo php 或 var_dump() 数组中的名称，然后您就可以在 javascript 中访问它来自 php 页面的所有数据都添加到您提供给成功回调的匿名函数的变量名中。对于您的情况，它将被访问为 data

Answer 2

在此处找到您的完整示例：https://websolutionstuff.com/post/crop-image-before-upload-using-croppie-plugin

考虑以下 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.";
  }
?>

这将提供对 AJAX 脚本的响应。

$('.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);
        }               
      }
    });
  });
});

Answer 3

回显 php 文件中的 $imageName，完成后在 javascript 中使用它。

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 $imageName;
  } else {
    echo " ";//In this case src will be empty
  }
?>

Java 脚本

$('.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="' + data + '" />';
                $("#uploaded-input").html(html);                
            }
        });
    });
});

如有任何疑问，请在下方评论。

使用 ajax 结果取回 php 变量值

Getting a php variable value back with an ajax result

javascript

php

ajax

jquery

croppie