为啥在php中使用cropper js上传图像时需要不工作

Posted 2023-05-08

【中文标题】为啥在php中使用cropper js上传图像时需要不工作

【英文标题】：why required not working while uploading image with cropper js in php为什么在php中使用cropper js上传图像时需要不工作

【发布时间】：2021-02-20 14:25:05

【问题描述】：

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

  

  

【问题讨论】：

“它不工作”是什么意思？究竟会发生什么？

@Wesley Smith 实际上文件正在上传空白我想要的是，如果未提供文件，则不应上传

@Dharman 是的，我知道

检查输入之前调用resize.croppie('result'...并做出相应反应

@charlietfl 根据你的说法，它显示了 toastr 错误“请上传文件”，但随后也被上传了。

【参考方案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();

           
        
      );
    );