Question

我使用croppie在我的网站上裁剪照片。我能够裁剪并上传图像。但是当我尝试裁剪和上传而不选择图像时，正在上传黑色图像。那么如何验证文件上传是否为空？（注意：我使用Codeigniter）

HTML：

<div class="form-group">
 <div id="upload-image"></div>
</div>
<div class="form-group">
 <label for="">Select profile image:</label>
 <input type="file" id="images" class="form-control">
 <button class="btn btn-success cropped_image help-block"><i class="fa fa-floppy-o"></i> Save</button>
</div>

JS：

$image_crop = $('#upload-image').croppie({
enableExif: true,
viewport: {
    width: 342,
    height: 192,
    type: 'square'
},
boundary: {
    width: 380,
    height: 250
    }
});
$('#images').on('change', function () {
    var reader = new FileReader();
    reader.onload = function (e) {
        $image_crop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            // console.log('<?php echo base_url() ?>');
        });
    }
    reader.readAsDataURL(this.files[0]);
});

$('.cropped_image').on('click', function (ev) {
    $image_crop.croppie('result', {
        type: 'canvas',
        size: { width: 1366, height: 768 }
    }).then(function (response) {
        $.ajax({
            url: "<?php echo base_url() ?>Light/upload_home_bg",
            type: "POST",
            data: {"image":response},
            success: function (data) {
        alert(data);
        $(location).attr('href','<?php echo base_url() ?>Light/home');
                // html = '<img src="' + response + '" />';
                // $("#upload-image-i").html(html);
            }
        });
    });
});

PHP：

 public function upload_home_bg()
{
 $path = 'uploads/'.$this->data['account']->username.'/';
 $croped_image = $_POST['image'];
 list($type, $croped_image) = explode(';', $croped_image);
 list(, $croped_image)      = explode(',', $croped_image);
 $croped_image = base64_decode($croped_image);
 $image_name = time().'.png';
 // upload cropped image to server
 file_put_contents($path.$image_name, $croped_image);

 $query = $this->db->query("select * from contents where user_id = '$this->user_id' and id = '$this->id' and meta_key = 'home_background_image'");
 if ($query->num_rows() > 0)
 {
   $data['home_bg'] = $query->row();
   $Bg = [
     'value' => base_url().$path.$image_name
   ];

   if ($this->Lights->update_home_background_image($Bg,$this->user_id,$data['home_bg']->content_id))
   {
     echo "Image successfully updated!";
   }
 }
 else
 {
   $Bg = [
     'user_id' => $this->user_id,
     'id' => $this->id,
     'business_name' => $this->BusinessName,
     'meta_key' => 'home_background_image',
     'content_title' => '',
     'description' => '',
     'value' => base_url().$path.$image_name
   ];
   if ($this->db->insert('contents',$Bg))
   {
     echo "Image successfully uploaded!";
   }
 }
}

我尝试这样做以检查用户是否选择了图片：

if (!empty($_POST['image'])) {
 # code...
}

但无论用户是否选择了图像，都会传递数据。以下是传递的数据（在警报窗口中）：https://i.stack.imgur.com/DtqFD.png

提前致谢！

Answer 1

好。我终于设法找到了解决方案。我所做的是在我的ajax var file_input = $('#images').val();上传递另一个值，它获取我的文件上传输入的值。

JS：

$('.cropped_image').on('click', function (ev) {
    $image_crop.croppie('result', {
        type: 'canvas',
        size: { width: 1366, height: 768 }
    }).then(function (response) {
    var file_input = $('#images').val();
        $.ajax({
            url: "<?php echo base_url() ?>Light/upload_home_bg",
            type: "POST",
            data: {"image":response,"file":file_input},
            success: function (data) {
             alert(data);
             $(location).attr('href','<?php echo base_url() ?>Light/home');
            }
        });
    });
});

然后在我的php文件中，我检查文件是否为空：

if (!empty($this->input->post('file')))
{
 //Upload code
}
else 
{
 //Prompt user to select an image
}

如何检查Croppie中未选中该文件

1 个答案: