2017-08-03 6 views
1

CodeIgniterに、ajaxを使用したすべてのform_validationエラーを示すコードを書きました。今、フォームに写真のアップロード機能を挿入したいのですが、投稿をクリックすると写真がアップロードされず、エラーメッセージも表示されず、sheetがDBに挿入されます。これはisset関数が機能しないことを意味します。また、私は表示する方法がわかりません$ this-> upload-> display_errors() ajaxを使用しています。ここに私の見解は以下のとおりです。ここで写真をアップロードせず、codeigniter3フレームワークでエラーを表示しない

<div id="messages"></div> 

    <?php $attributes = array('class' => 'rex-forms', 'name' => 'continueregistrationform', 'id' => 'continueregistrationform'); ?> 
       <?= form_open_multipart('user/submit', $attributes); ?> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="uplimg col-md-5"> 

      <div style="height:0px;overflow:hidden"> 
        <input type="file" id="userfiles" name="userfiles" accept="image/*" onchange="preview_image(event)" /> 
       </div> 

       <button type="button" class="rex-bottom-medium " onclick="chooseFile();"> 
        <span class="rex-btn-text">Upload photo</span> 
       </button> 
       <script> 
        function chooseFile() { 
         $("#userfiles").click(); 
        } 
       </script> 


       <img id="profph" class="profph" > 

       <!-- for showing photo --> 

       <script type='text/javascript'> 
       function preview_image(event) 
       { 
       var reader = new FileReader(); 
       reader.onload = function() 
       { 
        var output = document.getElementById('profph'); 
        output.src = reader.result; 
       } 
       reader.readAsDataURL(event.target.files[0]); 
       profph.style.border='2px solid black'; 
       } 
       </script> 



      </div> 
      <div class="col-md-7"> 


       <div class="row"> 
       <div class="col-md-6 col-sm-6"> 
        <div id="name" class="input-group"> 
         <span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span> 
         <input type="text" class="form-control" name="name" placeholder="Name" value="<?= $instructors['name']; ?>"> 
        </div><br> 
       </div> 


       <div class="col-md-6 col-sm-6"> 
        <div id="web" class="input-group"> 
         <span class="input-group-addon"><i class="fa fa-globe" aria-hidden="true"></i></span> 
         <input type="text" class="form-control" name="web" placeholder="Web-site" value="<?= $instructors['web']; ?>"> 
        </div><br> 
       </div> 
       </div> 

       <div class="row"> 
       <div class="col-md-6 col-sm-6"> 
        <div id="tel" class="input-group"> 
         <span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span> 
         <input type="text" class="form-control" name="tel" placeholder="Phone" value="<?= $instructors['phone']; ?>"> 
        </div><br> 
       </div> 
       <div class="col-md-6 col-sm-6"> 
        <div id="address" class="input-group"> 
         <span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span> 
         <input type="text" class="form-control" name="address" placeholder="Address" value="<?= $instructors['address']; ?>"> 
        </div><br> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6 col-sm-6"> 
        <div id="facebook" class="input-group"> 
         <span class="input-group-addon"><i class="fa fa-facebook-square" aria-hidden="true"></i></span> 
         <input type="text" class="form-control" name="facebook" placeholder="Facebook" value="<?= $instructors['fb']; ?>"> 
        </div><br> 
       </div> 


       <div class="col-md-6 col-sm-6"> 
        <div id="twitter" class="input-group"> 
         <span class="input-group-addon"><i class="fa fa-twitter-square" aria-hidden="true"></i></span> 
         <input type="text" class="form-control" name="twitter" placeholder="Twitter" value="<?= $instructors['twitter']; ?>"> 
        </div><br> 
       </div> 
       </div> 

       <div class="row"> 
       <div class="col-md-6 col-sm-6"> 
        <div id="youtube" class="input-group"> 
         <span class="input-group-addon"><i class="fa fa-youtube-square" aria-hidden="true"></i></span> 
         <input type="text" class="form-control" name="youtube" placeholder="Youtube" value="<?= $instructors['youtube']; ?>"> 
        </div><br> 
       </div> 
       <div class="col-md-6 col-sm-6"> 
        <div id="instagram" class="input-group"> 
         <span class="input-group-addon"><i class="fa fa-instagram" aria-hidden="true"></i></span> 
         <input type="text" class="form-control" name="instagram" placeholder="Instagram" value="<?= $instructors['instagram']; ?>"> 
        </div><br> 
       </div> 
       </div> 

      <!-- CKEditoru bosh saxliyanda validate error gostersin --> 
      <script type="text/javascript"> 
       CKEDITOR.on('instanceReady', function(){ 
         $.each(CKEDITOR.instances, function(instance) { 
           CKEDITOR.instances[instance].on("change",function(e) { 
            for (instance in CKEDITOR.instances) 
            CKEDITOR.instances[instance].updateElement(); 
            }); 
         }); 
       }); 
      </script> 

      <div class="row"> 
       <div class="col-md-12 col-sm-12"> 
        <div id="insdescription" class="col-md-12 input-group" > 
         <textarea type="text" id="insdescription1" name="insdescription" class="form-control" rows="5" ><?= $instructors['description']; ?></textarea> 
         <!-- <script> 
          CKEDITOR.replace('insdescription1'); 
         </script> --> 
        </div><br><br> 
       </div> 
       </div> 



       <div class="row"> 
       <div class="col-md-8 col-sm-12"> 
        &nbsp; 
       </div> 
       <div class="col-md-4"> 
        <div class="modal-footer btncolor"> 
       <button type="submit" name="submit" id="submit" class="rex-bottom-medium rex-btn-icon"> 
        <span class="rex-btn-text">Submit</span> 
        <span class="rex-btn-text-icon"><i class="fa fa-arrow-circle-o-right"></i></span> 
       </button> 
       </div> 
        </div> 
       </div> 
      </div> 

     </div> 
    </div> 
    </form> 

は私のコントローラである:ここでは

public function submit() { 

    //set validation rules 

    $validator = array('success' => false, 'messages' => array()); 

    $validate_data = array(
     array(
      'field' => 'name', 
      'label' => 'name', 
      'rules' => 'trim|required|min_length[2]|max_length[30]' 
     ), 
     array(
      'field' => 'web', 
      'label' => 'web adress', 
      'rules' => 'trim|required|valid_url|prep_url|min_length[3]' 
     ), 
     array(
      'field' => 'facebook', 
      'label' => 'facebook adress', 
      'rules' => 'trim|valid_url|prep_url|min_length[3]' 
     ), 
     array(
      'field' => 'twitter', 
      'label' => 'twitter adress', 
      'rules' => 'trim|valid_url|prep_url|min_length[3]' 
     ), 
     array(
      'field' => 'twitter', 
      'label' => 'twitter adress', 
      'rules' => 'trim|valid_url|prep_url|min_length[3]' 
     ), 
     array(
      'field' => 'youtube', 
      'label' => 'youtube adress', 
      'rules' => 'trim|valid_url|prep_url|min_length[3]' 
     ), 
     array(
      'field' => 'instagram', 
      'label' => 'instagram adress', 
      'rules' => 'trim|valid_url|prep_url|min_length[3]' 
     ), 
     array(
      'field' => 'tel', 
      'label' => 'telephone number', 
      'rules' => 'trim|required|alpha_numeric_spaces|min_length[3]|max_length[30]' 
     ), 
     array(
      'field' => 'address', 
      'label' => 'adress', 
      'rules' => 'trim|required|min_length[3]|max_length[30]' 
     ), 
     array(
      'field' => 'insdescription', 
      'label' => 'description', 
      'rules' => 'trim|required|min_length[10]' 
     ) 
    ); 

    $this->form_validation->set_rules($validate_data); 
    $this->form_validation->set_error_delimiters('<p class="text-danger">', '</p>'); 

    //validate form input 
    if ($this->form_validation->run() === FALSE) 
    { 
     // fails 
     $validator['success'] = false; 
     foreach ($_POST as $key => $value) { 
      $validator['messages'][$key] = form_error($key); 
     } 
    } 
    else 
    { 
      if(isset($_FILES['userfile']['name'])) { 

      $config['upload_path'] = './assets/img/Instructors/'; 
      $config['allowed_types'] = 'jpg|png'; 
      $config['max_size']  = 2048; 
      $config['overwrite']  = FALSE; 
      $config['encrypt_name'] = TRUE; 
      $config['remove_spaces'] = TRUE; 

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


      if(!$this->upload->do_upload()){ 
       $errors = array('error' => $this->upload->display_errors()); 
       $post_image = ''; 
      } else { 
       $datar = array('upload_data' => $this->upload->data()); 
       $post_image = $_FILES['userfile']['name']; 
      } 
     } else { 
      $post_image = 'sheet'; 
     } 
     //insert the user registration details into database 
     $data = array(
      'name' => $this->input->post('name'), 
      'web' => $this->input->post('web'), 
      'fb' => $this->input->post('facebook'), 
      'twitter' => $this->input->post('twitter'), 
      'youtube' => $this->input->post('youtube'), 
      'instagram' => $this->input->post('instagram'), 
      'phone' => $this->input->post('tel'), 
      'address' => $this->input->post('address'), 
      'description' => $this->input->post('insdescription'), 
      'instructor_img' => $post_image 
     ); 


     $id = $this->session->userdata('id'); 
     // insert form data into database 
     if ($this->user_model->updateUser($id, $data)) { 
       $validator['success'] = true; 
       $validator['messages'] = array(); 
     } 
     else 
     { 
      // error 
      $validator['success'] = false; 
      $validator['messages'] = '<div class="alert alert-danger text-center">fuckl</div>'; 
     } 
    } 
    echo json_encode($validator); 
} 

は私のモデルである:

function updateUser($id,$data){ 
    $this->db->where('id', $id); 
    return $this->db->update('instructors', $data); 
} 

そして、ここでは私のAjaxのファイルは次のとおりです。

$(document).ready(function() { 
$("#continueregistrationform").unbind('submit').bind('submit', function() { 
    var form = $(this); 


    $.ajax({ 
     url: form.attr('action'), 
     type: form.attr('method'), 
     data: form.serialize(), 
     dataType: 'json', 
     success:function(response) { 
     console.log(response);    
      if(response.success) {     
       $("#messages").html(response.messages); 
       $("#continueregistrationform")[0].reset(); 
       $(".text-danger").remove(); 
       $(".form-group").removeClass('has-error').removeClass('has-success'); 
       location.href = "http://localhost/edu-center/"; 

      } 
      else { 
       $("#messages").html(response.messages); 
       $.each(response.messages, function(index, value) { 
        var element = $("#"+index); 
        $(element).parent('div').find('.text-danger').remove(); 
        $(element).after(value); 

       }); 
      } 
     } // /success 
    }); // /ajax 

    return false; 
}); 
}); 

答えて

1

FormData()を使用する必要がありますファイルを提出し、テキストhttps://developer.mozilla.org/en/docs/Web/API/FormData/FormDataを入力しますか?

$("form#data").submit(function(){ 

var formData = new FormData(this); 

$.ajax({ 
    url: window.location.pathname, 
    type: 'POST', 
    data: formData, 
    async: false, 
    success: function (data) { 
     alert(data) 
    }, 
    cache: false, 
    contentType: false, 
    processData: false 
}); 

return false; 
}); 
+0

私はこれを行った、それは働いていないhttps://pastebin.com/VP7yhhSf –

+0

このhttps://pastebin.com/Ni6YZKPeを使用してみてください – DakMar

+0

私はそれを助け、それは助け!しかし、リダイレクトする代わりにSUCESS:TRUEと書かれており、検証は次のように表示されます。https://yadi.sk/i/be6J_ALb3LtPkH –

0

あなたは、コントローラでこれを確認することができます。

if($_FILES['file_name']['error'] == 0){ 
    //Upload code 
}else{ 
    //error response 
} 

あなたのイメージファイルがブレークまたは拡張子がその時に名前を変更されている基本的にこのコードは、それはあなたが応答をエラー表示します。

+0

それは動作しませんでした –

+0

この新しいFormData( '#formId')のようにformDataを使用し、POSTとしてタイプを使用してください。シリアル化された画像のアップロードを使用しても動作しない場合は、 –

+0

としました。しかし、代わりにリダイレクトすると、SUCESS:TRUEと書き込まれ、検証は次のように表示されます:https://yadi.sk/i/be6J_ALb3LtPkH –

関連する問題