Как загрузить изображение, используя ajax с проверкой jquery в CodeIgniter?

Question

Я использую проверку CodeIgniter, ajax и jquery.Я загружаю фотографию профиля, но она не работает.

Если я загружаю изображение без проверки jquery, оно работает, но с проверкой jquery, оно не работает.Он отображает условие If

if ($this - > form_validation - > run() == FALSE) {
        echo "Not working";
      }

Он не отправляет имя изображения из ajax в контроллер.Я добавил проверку на стороне сервера, и она отображает ошибку "The Profile Pic field is required." Не могли бы вы помочь мне с этой проблемой?

Просмотр

<form action="#" method="post" id="edit_Memberdetails" enctype="multipart/form-data">
<input type="file" name="profile_pic" id="profile_pic">
<?php echo form_error('profile_pic'); ?>
<input type="submit" value="Submit" class="btn btn-primary">
</form>

AJAX

$(document).ready(function() {
  $("#edit_Memberdetails").validate({
    // Specify the validation rules
    rules: {
      profile_pic: {
        required: true,
        extension: "jpg,jpeg,png"
      }
    },
    submitHandler: function(form) {
      var formData = new FormData(form);
      $.ajax({
        url: "<?php echo base_url('Member_controller/edit_Memberdetails');?>",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,
        success: function(data) {
          alert("Added successfully");
          setTimeout(function() { // wait for 5 secs(2)
            location.reload(); // then reload the page.(3)
          }, 1000);
        },
      }); // AJAX Get Jquery statment
    }

  });
});

Контроллер

public function edit_Memberdetails() {
  $this - > form_validation - > set_error_delimiters('<div class="error">', '</div>');
  $this - > form_validation - > set_rules('profile_pic', 'Profile Pic', 'required');

  if ($this - > form_validation - > run() == FALSE) {
    echo "Not working";
  } else {
    $config = [
      'upload_path' => './uploads/images',
      'allowed_types' => 'jpg|png|jpeg',
      'file_name' => uniqid().time().date("dmy")
    ];

    print_r($config);
    $this - > load - > library('upload', $config);
    if ($this - > upload - > do_upload('profile_pic')) {
      $profile_pic_set = $this - > upload - > data('file_name');
    }

    $data = array(
      'profile_pic' => $profile_pic_set
    );
    $secure_data = $this - > security - > xss_clean($data);
    if ($secure_data) {
      $this - > db - > where('customer_id', $this - > session - > userdata['login_session']['custid']);
      $this - > db - > set($secure_data);
      $this - > db - > update('members', $secure_data);
      $this - > session - > set_flashdata('success', "recode added");

    } else {
      $this - > session - > set_flashdata('error', "Sometning wrong! please check the internet connection and try again");
    }
    // redirect("Member_controller/member_dashboard");//calling employee register 
  }

}

Answer 1

Для загрузки изображения через ajax вы должны вручную добавить изображение к FormData, поэтому немного измените свой код, как показано в вашем submitHandler:

var formdata = new FormData(document.getElementById('edit_Memberdetails'));

var profile_pic = $('#profile_pic').get(0).files[0];

formdata.append('profile_pic', profile_pic);

Данные загрузки файла не сохраняются в $ _ POST массив , поэтому его нельзя проверить с помощью библиотеки code_gnidation CodeIgniter .Загрузка файлов в PHP доступна с использованием массива $ _ FILES , поэтому измените правило проверки формы в вашем Контроллере ,:

$this-> form_validation->set_rules('profile_pic', 'Profile Pic', 'required');

На это:

if (empty($_FILES['profile_pic']['name']))
{
  $this->form_validation->set_rules('profile_pic', 'Profile picture', 'required');
}

Answer 2

Добавить изображение к данным формы, например:

var fd = new FormData();
var files = $('#file')[0].files[0]; 
fd.append('file',files);

полный пример здесь