new FormData(form) 不提交表单

Question

我有一个包含文件的 HTML 表单。我希望能够在不刷新的情况下捕捉表单帖子的响应并根据需要编辑我的页面。

为此，我使用了一个为我提交表单的 Ajax 调用。但是，每当我调用 new FormData(form) 时，它都会提交表单，而不仅仅是获取表单数据。

这里是 HTML 表单

<form asp-controller="Application" asp-action="UploadDocument" enctype="multipart/form-data">
    <input id="modalDocId" name="documentId" type="hidden" />
    <input id="modalAppId" name="applicationId" type="hidden" />
    <div class="modal-body">
        <div class="modal-display">
            <input name="documentFile" type="file" class="dropify pa-20" data-height="250" data-allowed-file-extensions="pdf jpg jpeg png" accept=".pdf,.jpg,.jpeg,.png" />
        </div>
    </div>
    <div class="text-center pb-10">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button>
    </div>
</form>

还有 Ajax 调用

$(document).on('submit', 'form', function () {
    var form = $(this);
    var formData = new FormData(form);

    $.ajax({
        type: 'POST',
        enctype: 'multipart/form-data',
        url: '/Application/UploadDocument',
        data: formData,
        cache: false,
        success: function (data) {

            if (data == 1) {
                debugger;
            }
            else {
                debugger;
            }

            return false;
        }
    });

    return false;
})

它永远不会到达 Ajax 调用，在 new FormData(form) 提交表单并重定向到结果，它只是一个 1 或 0。

我希望通过 Ajax 提交表单，因此页面不会重定向，但我可以根据结果进行操作。

Answer 1

由于您使用的是委托事件处理程序，return false 将不起作用；在这种情况下，它被称为太晚了。直接在提交事件上修复此调用preventDefault()。

还有其他几个问题：

• 您需要为 FormData 构造函数提供一个 Element 对象，而不是 jQuery 对象。
• success 处理函数中的 return false 是多余的，应该删除。
• async: false 是非常糟糕的做法，需要删除。在这种情况下无论如何都没有必要。
• 您需要添加contentType 和processData 选项，并将它们都设置为false，以便FormData 在请求中正确编码。

说了这么多，试试这个：

$(document).on('submit', 'form', function (e) {
  e.preventDefault();
  var formData = new FormData(this);

  $.ajax({
    type: 'POST',
    url: '/Application/UploadDocument',
    data: formData,
    cache: false,
    contentType: false,
    processData: false, 
    success: function (data) {
      if (data == 1) {
        debugger;
      } else {
        debugger;
      }
    }
  });
})