Question

我已经编写了使用PHP，jQuery和带有Croppie插件的Ajax来裁剪图像的代码。

我也试图用它添加输入值。
但我不知道如何使用PHP使用ajax发布输入值我的意思是说当我上传图片时，我希望输入值也贴在图片上。

请查看以下代码供您参考： -

$uploadCrop = $('#upload-demo').croppie({
  enableExif: true,
  viewport: {
    width: 853,
    height: 292,
    type: ''
  },
  boundary: {
    width: 853,
    height: 292
  }
});

$('#upload').on('change', function () {
  var reader = new FileReader();
  reader.onload = function (e) {
    $uploadCrop.croppie('bind', {
      url: e.target.result
    }).then(function(){
      console.log('jQuery bind complete');
    });

  }
  reader.readAsDataURL(this.files[0]);
});

$('.upload-result').on('click', function (ev) {
  $uploadCrop.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function (resp) {

    $.ajax({
      url: "upload.php",
      type: "POST",
      data: {"image":resp},
      success: function (data) {
        html = '<img src="' + resp + '" />';
        $("#upload-demo-i").html(html);
      }
    });
  });
});

<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>
<script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">

<div class="row">
  <div class="col-md-4 text-center">
<div id="upload-demo" style="width:350px"></div>
  </div>
</div>
<!--<div class="row">
<div class="col-md-4" style="">
<div id="upload-demo-i" style="background:#e1e1e1;width:300px;padding:30px;height:300px;margin-top:30px"></div>
</div>
</div>-->
<div class="row">
  <div class="col-md-4" style="padding-top:30px;">
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<br/>
<input type="text" name="title">
<button class="btn btn-success upload-result">Upload Image</button>
  </div>
</div>

upload.php的

<?php
$data = $_POST['image'];

list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);

$data = base64_decode($data);
$imageName = time().'.jpg';
file_put_contents('upload/'.$imageName, $data);

echo 'done';

?>

Answer 1

所以你只想知道如何将标题添加到data以通过Ajax发布？

这比你已经做过的更容易!!
如果你已经完成了......

以下是：

data: {"title:":$("input[name='title']").val(),"image":resp}

您将在PHP端使用$_POST['title']获取标题。

我做了一个CodePen demo，很明显，Ajax被注释掉了...... 但是将要发送的数据显示在控制台中。

PHP - 使用croppie插件上传之前jquery ajax裁剪图像

1 个答案: