0

我正在使用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.phptime()用于 $imageName 变量。

我要么需要在上传过程中将 $imageName 传回页面 A，要么首先在页面 A 中设置 $imageName 并将其与图像信息同时传递给 uploader.php。

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

4

3 回答 3

1

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

于 2021-09-24T14:46:37.633 回答
1

回显$imageNamein php 文件，完成后在 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);                
            }
        });
    });
});

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

于 2021-09-25T05:35:14.130 回答
0

在这里找到您的完整示例：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);
        }               
      }
    });
  });
});
于 2021-09-24T15:01:29.020 回答