通过ajax选择图像自动提交表单

Auto submit Form via ajax on selecting image

本文关键字：提交 表单 图像 ajax 选择 通过      更新时间：2023-09-26

我有这个表单来改变用户的个人资料图片。我正在尝试更改点击当前图片并从用户文件系统中选择的图片

形式:

<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);
        }           
    });
}));
相关文章：