PHP - jquery ajax crop image before upload using croppie plugin

Question

I have written the code for cropping the image using PHP, jQuery, and Ajax with Croppie plugin.

I'm also trying to add the input value with it.
But I don't know how to post input value with ajax using PHP.
I mean to say when I'm a uploading image, I want input value also post with the image.

Please check with below code for your reference:-

$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';

?>

"but it is not working" it's not enought, you must describe clearly what's the problem in detail. Read How to Ask a Question on StackOverflow to learn how to improve your question accordingly. — gp_sflover
– gp_sflover, Commented May 27, 2017 at 22:06
Well read the field value and add it to the data object you're sending with your AJAX request ... — C3roe
– C3roe, Commented May 27, 2017 at 22:25
can you please help with some reference how to read the value and add it to the data? — Harshad Patil
– Harshad Patil, Commented May 27, 2017 at 22:35
@CBroe is this correct way to read the input value data: {"image":resp,id1: $('#id1').val()} — Harshad Patil
– Harshad Patil, Commented May 27, 2017 at 22:55

Louys Patrice Bessette · Accepted Answer · 2017-05-27 23:04:34Z

2

So you just want to know how to add the title to the data to post via Ajax?

That is easier than what you've already done!!
if YOU've done it...

Here is how:

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

You'll get the title using $_POST['title'] on PHP side.

I've made a CodePen demo where, obviously, Ajax is commented out...
But the data which would be sent is displayed in console.

answered May 27, 2017 at 23:04

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PHP - jquery ajax crop image before upload using croppie plugin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related