Блог

У меня есть эта форма для изменения изображения профиля пользователя. Я пытаюсь изменить изображение при нажатии на текущее изображение и выбрать из файловой системы пользователя

Форма:

 <form id="changeProfilePicForm" action="<?=base_url()?>user/change_profile_pic" method="post" accept-charset="utf-8" enctype="multipart/form-data">
      <div data-content="Click To update" class="image" id="profile-image">
        <input id="profile-image-upload" class="hidden" name="image" type="file" accept="image/x-png, image/gif, image/jpeg">
        <?if(strlen($user['image'])){?>
          <img src="<?=base_url().'uploads/profile/'.$user['image']?>" class="img-circle" alt="user profile pic" height="125px" width="125px">
        <?}else{?>
          <img src="<?=base_url()?>includes/img/avtar.png" class="img-circle" alt="user profile pic" height="125px" width="125px">
        <?}?>
        <input type="submit" class="hidden">
      </div>
    </form>
  

Javascript:

 $("#changeProfilePicForm").on('submit',(function(e){
  e.preventDefault();
  var $form = $( this );
  $.ajax({
    url: $form.attr( 'action' ),
    type: "POST",
    data:  new FormData($form),
    contentType: false,
    cache: false,
    processData:false,
    success: function(data){
      console.log(data);
    },
    error: function(data){
      console.log(data);
    }           
  });
}));

document.getElementById('profile-image').onclick = function() {
  document.getElementById('profile-image-upload').click();
};

document.getElementById('profile-image-upload').onchange = function(){
  document.getElementById('changeProfilePicForm').submit();
};
  

PHP-контроллер:

 public function change_profile_pic()
{
    $user_id = $this->session->user_id;
    $image = $this->uploadimage();
    if(strlen($image)){
        $user_data['image'] = $image;
        $updated = $this->user_model->update_user($user_id, $user_data);
        $data['response'] = 1;
        $data['image'] = $image;
        // redirect(base_url()."user");
        echo json_encode($data);
    }else{
        $data['response'] = 0;
        $data['message'] = "error";
        echo json_encode($data);
    }
    //redirect(base_url()."user");
}
  

Проблема, с которой я сталкиваюсь, заключается в том, что форма не отправляется через ajax. Это каталог, представленный в виде простой формы. Я не могу понять, что не так с кодом, поскольку изображение загружается при простой отправке формы. Есть ли какие-либо проблемы с привязкой события или я чего-то здесь не хватает?

Когда вы вызываете

 document.getElementById('changeProfilePicForm').submit();
  

submit событие не запускается. Попробуйте

 $('#changeProfilePicForm').trigger('submit');
  

Редактировать. Избавьтесь от формы в html:

 <input type="file" id="image">
  

js:

 function handleUpload(event) {
  var file = this.files[0];
  if (!file) return;
  var formData = new FormData();
  formData.append('file', file);
  return $.ajax({
    type: 'POST',
    url: '/images',
    data: formData,
    processData: false,
    contentType: false,
    //...
  });
}

$('#image').on('change', handleUpload);
  

Я полагаю, что FormData ожидает собственный элемент формы $form[0] , а не элемент формы jQuery $form .

 $("#changeProfilePicForm").submit(function (e) {
    e.preventDefault();
    var $form = $(this);
    $.ajax({
        url: $form.attr('action'),
        type: "POST",
        data:  new FormData($form[0]),
        contentType: false,
        cache: false,
        processData: false,
        success: function (data) {
            console.log(data);
        },
        error: function(data){
            console.log(data);
        }           
    });
}));