PHP - Codeigniter jsonを使用した検証

Question

フィールドがあり、すべてのフィールドにバリデーションがあります。すべての検証が機能しています。

しかし、問題は自分のフィールドでファイルをアップロードすることです。すでに画像ファイルを置いていても、画像をアップロードする必要があることを確認します。

私はsweetalertを使用して検証エラーを表示しています。

MY CONTROLLER

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; 
    } 
} 

VIEW

<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> 

のJavascript

$(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オブジェクトを使用して、ページを再読み込みせずにファイルを転送することができます。 this questionを詳しく読んでください。このAPIは現代のブラウザやie10 +で動作するため、ブラウザの互換性にも注意してください。

私は通常jqueryプラグインでこれを行います。沢山あります。最も人気のあるの一つは、例えば、他のhttps://github.com/blueimp/jQuery-File-Upload、次のとおりです。代わりに、シリアル化のhttp://malsup.com/jquery/form/#file-upload

Answer 2

使用いるFormData私はそれがIE9のために動作しません。また、以下、あなたがいるFormData hereについての詳細を読むことができます警告しますが、ファイルをアップロードします。

$(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(); 
});