为什么在PHP中使用ropper js上传图像时要求不工作

问题描述

大家好，我正在建立一个项目，在该项目中，我使用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 PART

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;

  }

  


}

解决方法

您可以通过这种方式来实现它，希望它能起作用

float

cropperjs file-upload javascript jquery