Javascript 要发送到web服务器的裁剪结果

有人能帮我吗？ 我不太精通JavaScript，我已经一遍又一遍地阅读了文档，并且在这里查看了很多帖子，还用谷歌搜索了这个问题。我无法获取裁剪结果并将其发送到web服务器。这是我的密码

HTML:

上传
多恩
取消

JS:

var basic=$（“#主裁剪器”）.cropie({
视口：{宽度：300，高度：400，键入：'square'}，
边界：{宽：700，高：500}，
showZoomer：对
});
函数读取文件（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#主裁剪器”）.cropie（'bind'{
url:e.target.result
});
$（'.actionDone'）.toggle（）；
$（'.actionUpload'）.toggle（）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（'.actionUpload input'）.on（'change'，函数（）{readFile（this）；}）；
$（'.actionDone'）。在（'click'，function（）上{
$（“#主裁剪器”）.cropie（'result'{
键入：“画布”，
大小：“视口”
}).然后（功能（resp）{
$（'#formTest'）.find（'name=[“imgf”]'）.val（'src'，resp）；
});
$（'.actionDone'）.toggle（）；
$（'.actionUpload'）.toggle（）；
});

我做了一些额外的研究，并通过使用AJAX找到了一个解决方案。我试过了，效果很好。需要对CSS做一些清理，但这没什么大不了的。以下是一些修改后的代码：

部分JavaScript：

$('.crop_image').click(function(event){
    image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

阿贾克斯：

if（isset（$\u POST[“image”]））
{
$data=$_POST[“图像”]；
$image_array_1=分解（“；”，$data）；
$image\u array\u 2=分解（“，”，$image\u array\u 1[1]）；
$data=base64_解码（$image_数组_2[1]）；
$imageName=time（）.'.png'；
文件内容（“pg/$imageName”，$data）；
回声'；
}

---

对不起。我没有忽视你。我刚到你的岗位。我不熟悉“Django”，但如果它接近Php，那么我会查看“Ajax:”标记下面包含的代码部分。我必须使用Javascript来准备图像，然后将其发送到一个php文件（通过AJAX）上传到web服务器。正如您所见，我必须先准备图像文件，然后通过“文件内容”将其发送到服务器。如果您能更详细地解释您遇到的问题，我会尽力帮助您。好的，实际上Django通过request.files接收文件数据，这是一个字典。因此，我通过request.FILES['image']接收图像数据，其中image是输入文件的名称。Croppie结果返回base64中的图像数据，如以下数据：image/png；空军基地64号。。。由于它不是字符串，所以在服务器中会引发多值错误。那么，如何将图像数据以字符串或其他形式发送到服务器。。？谢谢你的时间@SiriusGDAgain，我不熟悉Django，但如果我正确理解你的问题。。。在“Ajax:”标签下（实际上是php代码），我必须将响应中的信息解析（分解）成几个数组。一旦我将它分离到第二个数组中，我就使用base64_decode函数来生成$data字符串。我不知道你是否有同样的功能。所以我能说的最好的方法就是看看这三行代码，看看你是否能做同样的事情。对不起，我是最好的助手。我自己还在学习。它对我有用。

<script>

var basic = $('#main-cropper').croppie({
    viewport: { width: 300, height: 400, type: 'square' },
    boundary: { width: 700, height: 500 },
    showZoomer: true
});

function readFile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#main-cropper').croppie('bind', {
        url: e.target.result
      });
      $('.actionDone').toggle();
      $('.actionUpload').toggle();
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$('.actionUpload input').on('change', function () { readFile(this); });
$('.actionDone').on('click', function(){


    $('#main-cropper').croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $('#formTest').find('name=["imgf"]').val('src', resp);
    });

  $('.actionDone').toggle();
  $('.actionUpload').toggle();
});

</script>

$('.crop_image').click(function(event){
    image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

if(isset($_POST["image"]))
{
    $data = $_POST["image"];

    $image_array_1 = explode(";", $data);

    $image_array_2 = explode(",", $image_array_1[1]);

    $data = base64_decode($image_array_2[1]);

    $imageName = time() . '.png';

    file_put_contents("pg/$imageName", $data);

        echo '<img src="'.$imageName.'" class="img-thumbnail" />';

}