PHP-使用json进行Codeigniter验证

Question

我有一个字段，每个字段都有一个验证。 所有验证都有效。

但是问题出在我要上传文件的领域。 即使我已经放置了图像文件，它仍将验证我必须上传图像。

即时通讯使用sweetalert来显示验证错误。

我的控制器

public function saveproducts(){
    $config['upload_path'] = 'uploads/products';   
    $config['allowed_types'] = 'jpg|png|jpeg';
    $config['max_size'] = '2048000';
    $config['overwrite'] = TRUE;
    //$config['file_name'] = $this->input->post('prod_name');

    $this->load->library('upload', $config);

    $this->form_validation->set_rules('userfile', 'Product Image','callback_rulesprodimage');

    if($this->form_validation->run()==FALSE){
        echo json_encode(validation_errors());
    }else{

        $products = array(
            'product_image' => $this->input->post('userfile'),
            'upload_data' => $this->upload->data(),
            );

        $this->CrudModel->insertproductdata($products);

        echo json_encode(1);
    }

}

public function rulesprodimage(){
    if (isset($_FILES['userfile']) && !empty($_FILES['userfile']['name'])){
        if ($this->upload->do_upload('userfile')){
        return true;
        }else{
        $this->form_validation->set_message('rulesprodimage', $this->upload->display_errors());
        return false;
        }
    }else{
      // throw an error because nothing was uploaded
      $this->form_validation->set_message('rulesprodimage', "You must upload an image!");
      return false;
    }
}

视图

<form method="post" enctype="multipart/form-data" id="prod-submit">
<div class="form-group">
<label class="control-label">Product Image <span id="required"> * </span></label>
<input type="file" name="userfile" class="form-control">
</div>
</form>

Java脚本

$(document).ready(function(){
$('#prod-submit').on('submit',function(e) { 

$.ajax({
    url: base_url+'adminpage/saveproducts/',

    data:$(this).serialize(),
    type:'POST',
    success:function(data){

      var result = JSON.parse(data); 
        if(result===1){ 
            console.log(result);
            document.location.href = base_url+"adminpage/products/"
        }
        else{
           swal({
                type: 'error',
                html: result,

              }).done();
        }
    },
    error:function(data){
    swal("Oops...", "Something went wrong :(", "error");

    }
  });
  e.preventDefault(); 
});

}）;

Answer 1

该文件不会像这样通过ajax，因此$ _FILES为空，CI也看不到。 您可以传输文件而无需使用FormData对象重新加载页面。 阅读更多关于这个问题 。 还请注意浏览器的兼容性，因为此api可在现代浏览器和ie10 +上使用。

我通常使用jQuery插件来做到这一点。 有许多。 最受欢迎的一种是https://github.com/blueimp/jQuery-File-Upload ，其他例如： http : //malsup.com/jquery/form/#file-upload

Answer 2

使用FormData而不是序列化来上传文件，尽管我确实警告说它不适用于IE9及以下版本，但您可以在此处阅读有关FormData的更多信息。

$(document).ready(function(){
$('#prod-submit').on('submit',function(e) { 

// Create a new FormData with your form selector inside.   

var formdata = new FormData($('form')[0]); 

$.ajax({
    url: base_url+'adminpage/saveproducts/',

    data:formdata,
    type:'POST',
    success:function(data){

      var result = JSON.parse(data); 
        if(result===1){ 
            console.log(result);
            document.location.href = base_url+"adminpage/products/"
        }
        else{
           swal({
                type: 'error',
                html: result,

              }).done();
        }
    },
    error:function(data){
    swal("Oops...", "Something went wrong :(", "error");

    }
  });
  e.preventDefault(); 
});