Я написал код в CodeIgniter, который показывает все ошибки form_validation с помощью ajax. Теперь я хочу вставить функцию загрузки фотографий в форму, но когда я нажимаю кнопку «Отправить», она не загружает фотографию, а также не выдаёт сообщение об ошибке, вместо этого она вставляет sheet
в БД, это означает, что функция isset не работает. Также я не знаю, как отображать $ this-> upload-> display_errors () с помощью ajax. Вот мое мнение:
<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"> </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; }); });
Вам нужно использовать 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; });
Вы можете проверить это в контроллере:
if($_FILES['file_name']['error'] == 0){ //Upload code }else{ //error response }
Этот код, в основном, когда ваш файл изображения был сломан или переименован, в это время он показывает вам ответ об ошибке.