Upload Cropped Image to PHP

Upload Cropped Image to PHP

Hi,

I am using below plugin to crop image:


I wanted to know how to pass POST the image in order to process it in my PHP:

here is my code:

  1. <?php
  2.     include('../includes/php_header.php');
  3.     include('../includes/connect2db.php');
  5. $item_guid = $_GET["id"];
  6. ?>
  7. <!doctype html>
  8. <html>
  9. <head>
  10. <meta charset="utf-8">
  11. <title>New Item</title>
  12. <link href="../css/admin_style.css" rel="stylesheet">
  13. <!-- jQuery-->
  14. <script src="../jQueryAssets/jquery-1.11.2.js"></script>
  15. <script src="../jQueryAssets/jquery-ui.js"></script>
  16. <link rel="stylesheet" href="../jQueryAssets/croppie/croppie.css" />
  17. <script src="../jQueryAssets/croppie/croppie.js"></script>

  19. <!-- JQuery CSS -->
  20. <link href="../css/start/jquery-ui.css" rel="stylesheet">
  21. <link href="../css/start/jquery-ui-1.10.3.custom.css" rel="stylesheet">

  23. <script>
  24. $(function()
  25. {
  26. $("#btnSave, #btnCancel").button();
  28. $('#btnCancel').click(function() { window.location = 'index.php'; });
  29. });
  30. </script>

  32. </head>
  33. <body>

  35. <center>

  37. <br><br><br>
  38. <?php
  39. $mysql_query = $mysql_connection->prepare('CALL sp_get_item_details_by_item_guid(:param_item_guid)');
  40. $mysql_query->bindParam(':param_item_guid', $item_guid, PDO::PARAM_STR);
  42. $mysql_query->execute();

  44. while($mysql_row = $mysql_query->fetch())
  45. {
  46. $item_id = $mysql_row["item_id"];
  47. $item_name = $mysql_row["item_name"];
  48. }
  49. ?>
  50. <h1>Main Image</h1>
  51. <b><?php echo $item_name; ?></b><br><br><br><br>

  53. <form id="frmCakeBoutique" action="save_item_main_image.php" method="post">

  55. <input type="hidden" id="txtItemGUID" name="txtItemGUID" value="<?php echo $item_guid; ?>" />
  56. <input type="hidden" id="txtItemID" name="txtItemID" value="<?php echo $item_id; ?>" />

  58. <input type="file" id="txtImage" name="txtImage" value="Choose a file" />

  60. <br><br>

  62. <div class="upload-msg">
  63. Upload an Item image
  64. </div>

  66. <br><br>

  68. <div id="upload-demo"></div>

  70. <br><br>
  71. <button id="btnSave" type="submit" style="width: 100%;">Save</button>

  73. <br><br>
  74. <button id="btnCancel" type="button" style="width: 100%;">Cancel</button>

  76. </form>

  78. </center>

  80. <script type="text/javascript">
  81. $(document).ready(function()
  82. {
  83. $uploadCrop = $('#upload-demo').croppie({
  84.     viewport: {
  85.         width: 405,
  86.         height: 311,
  87.         type: 'square'
  88.     },
  89.     boundary: {
  90.         width: 405,
  91.         height: 311
  92.     }
  93. });
  95. $('#upload-demo').croppie('bind', {
  96.     url: 'http://lifewallpaperz.com/image.php?pic=/images/2015/cute-cat/cute-cat-01.jpg',
  97.     points: [77,469,280,739]
  98. });

  100. function readURL(input) {
  101.     if (input.files && input.files[0]) {
  102.         var reader = new FileReader();

  104.         reader.onload = function (e)
  105. {
  106.             // $('#blah').attr('src', e.target.result);

  108. $('#upload-demo').croppie('bind', {
  109. url: e.target.result,
  110. points: [77,469,280,739]
  111. });
  112.         }

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

  118. $("#txtImage").change(function(){
  119.     readURL(this);
  120. });
  121. });
  122. </script>
  123. </body>
  124. </html>