如何在CodeIgniter中使用带jquery验证的ajax上传图像？

Question

I am using CodeIgniter, ajax and jquery validation. I am uploading the profile pic but it's not working.

If I upload an image without jquery validation then it's working but with jquery validation, it's not working. It displays the If condition

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

It's not sending the image name from ajax to controller. I added the server side validation and it's displaying the error "The Profile Pic field is required." Would you help me out with this issue?

View

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

  });
});

Controller

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

For image uploading via ajax you have to manually append image to FormData so change your code little bit as following in your submitHandler:

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

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

formdata.append('profile_pic', profile_pic);

File upload data is not stored in the $_POST array, so cannot be validated using CodeIgniter's form_validation library. File uploads are available to PHP using the $_FILES array so change form validation rule in Your Controller, :

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

To this :

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