Question

我有一个包含两个输入类型=“文件”字段和一个提交按钮的表单。其中一个文件字段将被用户裁剪，另一个不会。我正在使用的裁剪插件是cropbox。我已经设置了基本的用户界面，但是我不明白如何通过Ajax将表格数据与裁剪后的图像和未剪切的图像一起发送到PHP。这是我目前所拥有的jsfiddle。

HTML

<form class="image_form" action="" method="post" enctype="multipart/form-data">
  <input type="file" id="cropimage">
  <input type="file">
  <input type="submit" value="submit">
</form>

的jQuery

$(function() {
  $("#cropimage").on('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({
        src: reader.result
      });
      $img.on('load', function() {
        $img.cropbox({
          width: 600,
          height: 400
        }).on('cropbox', function(event, results, img) {
          submission(JSON.stringify(results));
        });
      });
      $('body').append($img);
    };
    reader.readAsDataURL(file);
  });
});

function submission(get_data) {
  $(".image_form").submit(function(e) {
    e.preventDefault();

    console.log(get_data);

    $.ajax({
      type: 'POST',
      url: '',
      data: new FormData(this),
      processData: false,
      contentType: false,
      success: function(data) {

      }
    });
  });

}

用户上传图片后，会检查是否已按下提交按钮以通过Ajax发送。如何通过Ajax而不是原始图像发送裁剪后的图像？

Answer 1

使用FormData时，您可以直接向Blob附加调整后的图片。

CropBox插件具有getBlob方法，可用于获取具有裁剪图像的blob。您只需要将blob附加到formData：

formData.append('croppedFile', imageBlob)
// or if you want to add filename
formData.append('croppedFile', imageBlob, 'cropped.jpg')

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append https://github.com/acornejo/jquery-cropbox#methods

通过Ajax将裁剪后的图像数据发送到PHP

1 个答案: