`Update`

Question

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

如果我将以下代码用作简单函数-则不传递表单数据。如果我按原样使用该代码-可以，但是用户必须单击“提交”按钮。

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

OR

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

我有这个功能-当用户点击“提交”时，效果很好：

// 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输入的change事件，如下所示，然后触发表单的submit事件或立即使用ajax进行FormData调用，请参见下文演示。

如果您想知道如何使用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起可用。

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

1 个答案:

`Update`