Ajax 用表单提交图片 - 传递 FormData - 触发提交

Question

我只是想使用 ajax 提交带有手机图像的表单。

如果我使用下面的代码作为一个简单的函数 - 表单数据不会被传递。 如果我按原样使用代码 - 它可以工作，但用户必须单击提交按钮。

如何将 FormData 正确传递给简单的 $.ajax({});提交？

或

如何在拍照或选择照片时触发下面的代码？

我有这个 - 当用户点击提交时它工作正常：

// how do I trigger this when image file is selected?
$("#Upload_Form").submit(function(e){

        e.preventDefault();

        // OR - how do I get FormData with image without using: '$("#Upload_Form").submit(function(e)'
        var formData = new FormData(this);

        $.ajax({
           // POST details are here etc.
        });
    });

Answer 1

如下所示为file 输入绑定更改事件，然后触发表单的submit 事件或立即使用FormData 进行ajax 调用，参见下面的演示。

如果您想知道如何使用FormData 和ajax 提交图像，请参阅answer

$("#my-form").on('submit', function(e) {

  e.preventDefault();

  // OR - how do I get FormData with image without using: '$("#Upload_Form").submit(function(e)'
  var formData = new FormData(this);
  console.log("sending Ajax call now");
  $.ajax({
    // POST details are here etc.
  });
});


$("#my-file").on('change', function() {
  //you can either trigger the form submit here
  var form = $("#my-form");
  $("#my-form").submit();

  //OR
  //use this to send the ajax call to upload the image
  // var form=$("#my-form")[0];
  // var formData = new FormData(form);

  // $.ajax({
  //     type: "POST",
  //     url: 'your/url',
  //     data: formData,
  //     processData: false,
  //     contentType: false,
  //     success: function (data) {
  //         console.log("SUCCESS : ", data);
  //     },
  //     error: function (e) {
  //         console.log("ERROR : ", e);
  //     }
  // });


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" enctype="multipart/form-data">
  <input type="file" name="my-file" id="my-file" />
  <input type="submit" name="submit" value="submit" />
</form>

Update

注意：如果您想使用 ajax 调用来发送 formData，您需要将 processData 和 contentType 设置为 false。 contentType: false 仅从 jQuery 1.6 开始可用。