使用 ajax 结果获取 php 变量值答案

【问题标题】：Getting a php variable value back with an ajax result使用 ajax 结果获取 php 变量值
【发布时间】：2021-11-17 20:17:36
【问题描述】：

我正在使用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。

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

【问题讨论】：

不是data，而是resp，你必须在成功函数中使用？
图片上传端工作正常，我在上传 $imageName 变量以供以后使用时尝试获取它时遇到了麻烦。
我会调整您的 PHP 以响应新的文件路径和名称（使用 echo 或 print()）。这样，您的 jQuery 可以在 success 回调中收集此详细信息。现在，由于您使用的是 Croppie 的原始详细信息，因此它并未指向已上传的文件。
我不确定我是否理解你想要做什么，你想将图片名称的信息从页面 A 传递给 uploader.php 吗？
是的，无论哪种方式都可以，在页面 A 中将 $imageName 设置为 time()，然后在裁剪图像 blob 的同时将其传递给 uploader.php，或者保持原样并通过上传时返回页面 A 的信息。

标签： javascript php jquery ajax croppie

【解决方案1】：

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

的形式访问

【讨论】：

我尝试在 uploader.php 中回显 $imageName 但不知道如何在页面 A Ajax 响应部分中读取它
我已经编辑了答案来解释

【解决方案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);
        }               
      }
    });
  });
});

【讨论】：

【解决方案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);                
            }
        });
    });
});

如有任何疑问，请发表评论。

【讨论】：