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

【问题标题】：Auto submit Form via ajax on selecting image选择图像时通过 ajax 自动提交表单
【发布时间】：2017-03-05 04:18:03
【问题描述】：

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

表格：

<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 提交的。它是以简单形式提交的目录。我无法弄清楚代码有什么问题，因为图像是通过简单的表单提交上传的。事件绑定有什么问题还是我在这里遗漏了什么？

【问题讨论】：

这可能是因为您在 $("#changeProfilePicForm").on('submit', 内部运行了 ajax profile-image-upload 的 on change 事件触发了不涉及 ajax 的提交。
在$.ajax(....); 之后添加return false; 以忽略表单提交

标签： javascript jquery ajax forms image-uploading

【解决方案1】：

当你打电话时

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);

【讨论】：

确实有效，但现在图像没有通过 ajax 发布。是否有任何特殊原因导致提交事件没有被触发？
特别的原因是通过 JS 调用 DOM 元素上的操作不会触发事件，因为它会自然地完成。 IE。如果您正在调用$('#btn').click() 或$('#form').submit()，它不会触发监听click 或submit 事件的事件处理程序。我建议通过将$.ajax 移动到单独的函数并在文件输入更改时调用该函数来避免这种.on('submit)` 逻辑。

【解决方案2】：

我相信 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);
        }           
    });
}));

【讨论】：