为什么在 php 中使用 cropper js 上传图片时需要不工作

Question

大家好，我正在构建一个项目，我在其中使用 cropper js 来裁剪上传的图像，我的代码一切正常，比如文件正在裁剪并上传到数据库，但问题是我想检查文件字段不应该为空我正在使用必需的但它不起作用我正在粘贴我到目前为止使用的代码你们可以看看我需要做什么来纠正错误。

HTML

<form id="partyins"  class="needs-validation" action="" method="post" enctype="multipart/form-data" novalidate>

                          
 <div class="col-md-12" style="padding:5%;">
   <input type="file" id="image" class="form-control" required>

  <input type="hidden" name="product_id" id="product_id" value="<?php if(isset($_GET['product_id'])){ echo $_GET['product_id']; } ?>">
                          

  <button type="submit" class="btn btn-success btn-block btn-upload-image mt-4" style="margin-top:2%">Upload Image</button>
  </div>
                             
</form>

JS 部分

var resize = $('#upload-demo').croppie({
    enableExif: true,
    enableOrientation: true,    
    viewport: { // Default { width: 100, height: 100, type: 'square' } 
        width: 64,
        height: 64,
        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]);
});


$("#partyins").submit(function(e){
  e.preventDefault();

  var prod_id = $('#product_id').val();

  resize.croppie('result', {
    type: 'canvas',
    size: 'viewport'
  }).then(function (img) {

    if(img == ''){
      toastr.error("Please upload a file",'Error');
    }

    $.ajax({
      url: "model/product_image/product_image.php?insertimg&imgid="+prod_id,
      type: "POST",
      data: {"image":img},
      success: function (data) {
       var res = data;
         if(res==8){
            toastr.error("Sorry! There is an error",'Error');
          }else if(res==9){
            toastr.error("Please upload a file",'Error');
          }else{
           toastr.success(data,'Update');
           $('#partyins')[0].reset();

         }
      }
    });
  });
});

PHP


if(isset($_GET['insertimg']) && isset($_GET['imgid'])){

  $id = $_GET['imgid'];

  $image = $_POST['image'];

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

  $image = base64_decode($image);
  $image_name = 'product_id'.$id.'_'.time().'.png';
  file_put_contents("../../../upload_products/".$image_name, $image);

  if(!$image == ''){

    $sql_inst = "UPDATE $tb_products SET `p_upload`='$image_name' WHERE id='$id'";
    $res_inst = mysqli_query($conn,$sql_inst);   
    if($res_inst){
      echo "Updated Successfully";

    }else{
      echo 8;
    } 

  }else{

    echo 9;

  }

  


}

Answer 1

你可以这样操作，希望能行得通

var image = $('#image').val();

  if(image == ''){
      toastr.error("Please upload a file",'Error');
    }else{

      resize.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function (img) {


      $.ajax({
        url: "model/product_image/product_image.php?insertimg&imgid="+prod_id,
        type: "POST",
        data: {"image":img},
        success: function (data) {
         var res = data;
           if(res==8){
              toastr.error("Sorry! There is an error",'Error');
            }else if(res==9){
              toastr.error("Please upload a file",'Error');
            }else{
             toastr.success(data,'Update');
             $('#partyins')[0].reset();

           }
        }
      });
    });

    }

为什么在 php 中使用 cropper js 上传图片时需要不工作

why required not working while uploading image with cropper js in php

javascript

php

jquery

file-upload

cropperjs