在同一頁面上處理AJAX請求– PHP

Question

我正在嘗試創建圖像裁剪工具，它應該上傳圖片，裁剪並在頁面上將其作為image.jpg而不是作為基礎64（data：image）打印出來。據我所知，它無法通過HTML和JavaScript的。 所以我試圖通過PHP做到這一點。 我正在上傳和裁剪圖像，但無法捕獲結果，無法將其上傳到服務器並將其作為image.jpg打印在頁面上。這是我的代碼，請幫忙

 <div id="upload-demo"></div> <div class="col-md-4" style="padding:5%;"> <strong>Select image to crop:</strong> <input type="file" id="image"> <button class="btn btn-success btn-block btn-upload-image" style="margin-top:2%">Upload Image</button> </div> <script type="text/javascript"> var resize = $('#upload-demo').croppie({ enableExif: true, enableOrientation: true, viewport: { // Default { width: 100, height: 100, type: 'square' } width: 200, height: 200, type: 'circle' //square }, boundary: { width: 300, height: 300 } }); $('#image').on('change', function () { var reader = new FileReader(); reader.onload = function (e) { resize.croppie('bind',{ url: e.target.result }).then(function(){ console.log('jQuery bind complete'); }); } reader.readAsDataURL(this.files[0]); }); $('.btn-upload-image').on('click', function (ev) { resize.croppie('result', { type: 'canvas', size: 'viewport' }).then(function (img) { $.ajax({ type: "POST", data: {form_submit: 1,"image":img}, success: function (data) { html = '<img src="' + img + '" />'; $("#preview-crop-image").html(html); } }); }); }); </script> <?php if(isset($_POST['form_submit'])) { $imageProcess = 0; if(is_array($_FILES)) { $fileName = $_FILES['image']['tmp_name']; $sourceProperties = getimagesize($fileName); $resizeFileName = time(); $uploadPath = "./uploads/"; $fileExt = pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION); $uploadImageType = $sourceProperties[2]; $sourceImageWidth = $sourceProperties[0]; $sourceImageHeight = $sourceProperties[1]; move_uploaded_file($fileName, $uploadPath. $resizeFileName. ".". $fileExt); $imageProcess = 1; } if($imageProcess == 1){ ?> <img src="<?php echo $uploadPath.$resizeFileName.'.'. $fileExt; ?>" width="700" height="700" > <h4><b>Thump Image</b></h4> <?php }else{ ?> <div class="alert icon-alert with-arrow alert-danger form-alter" role="alert"> <i class="fa fa-fw fa-times-circle"></i> <strong> Note !</strong> <span class="warning-message">Invalid Image </span> </div> <?php } $imageProcess = 0; } ?> 

Answer 1

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

        <div class="col-md-4" style="padding:5%;">
        <strong>Select image to crop:</strong>
        <input type="file" id="image">

        <button class="btn btn-success btn-block btn-upload-image" style="margin-top:2%">Upload Image</button>
        </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.3/croppie.js" type="text/javascript"></script>
<script type="text/javascript">


var resize = $('#upload-demo').croppie({
    enableExif: true,
    enableOrientation: true,    
    viewport: { // Default { width: 100, height: 100, type: 'square' } 
        width: 200,
        height: 200,
        type: 'circle' //square
    },
    boundary: {
        width: 300,
        height: 300
    }
});


$('#image').on('change', function () { 
  var reader = new FileReader();
    reader.onload = function (e) {
      resize.croppie('bind',{
        url: e.target.result
      }).then(function(){
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
});


$('.btn-upload-image').on('click', function (ev) {
alert(111);
  resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function (img) {
    $.ajax({
      type: "POST",
      data: {form_submit: 1,"image":img},
      success: function (data) {
        html = '<img src="' + img + '" />';
        $("#preview-crop-image").html(html);
      }
    });
  });
});


</script>

<?php
if(isset($_POST['form_submit'])) {
    $imageProcess = 0;
    if(is_array($_FILES)) {
        $fileName = $_FILES['image']['tmp_name'];
        $sourceProperties = getimagesize($fileName);
        $resizeFileName = time();
        $uploadPath = "./uploads/";
        $fileExt = pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
        $uploadImageType = $sourceProperties[2];
        $sourceImageWidth = $sourceProperties[0];
        $sourceImageHeight = $sourceProperties[1];

        move_uploaded_file($fileName, $uploadPath. $resizeFileName. ".". $fileExt);
        $imageProcess = 1;
    }

    if($imageProcess == 1){
    ?>




                <img src="<?php echo $uploadPath.$resizeFileName.'.'. $fileExt; ?>" width="700" height="700" >

                <h4><b>Thump Image</b></h4>




    <?php

    }else{
    ?>
        <div class="alert icon-alert with-arrow alert-danger form-alter" role="alert">
            <i class="fa fa-fw fa-times-circle"></i>
            <strong> Note !</strong> <span class="warning-message">Invalid Image </span>
        </div>
    <?php
    }
    $imageProcess = 0;
}
?>
try this it should work