通过 AJAX (jQuery / Node.js) 提交包含文件字段的表单答案

【问题标题】：Submitting a form containing a file field via AJAX (jQuery / Node.js)通过 AJAX (jQuery / Node.js) 提交包含文件字段的表单
【发布时间】：2013-03-29 09:42:07
【问题描述】：

我有一个带有单个文件字段的表单：

<form id="myForm" action="/processFile" method="post" enctype="multipart/form-data">
  <input type="file" name="uploadFile">
</form>

我想通过 AJAX 提交表单（在客户端使用 jQuery，在服务器端使用 Node.JS）。

这是我在 jQuery 客户端首先尝试的（在查看了类似 Submit form via AJAX in jQuery 这样的问题之后）：

submitButton.on('click', function(ev) {
  $.ajax({
    type: "GET",
    url: $('#myForm').action
    data: { form: $('#myForm').seralize() }
  }).done(function(res) {
    $('#targetDiv').html(res);
  });
});

很遗憾，这不起作用，因为 .seralize() 方法不适用于文件输入。

所以我决定实际发布表单是最好的方法，因为它处理了将文件上传到服务器的异步混乱。所以我尝试了这个：

submitButton.on('click', function(ev) {
  $('#myForm').submit(function(err) {
    $.ajax({
      type: "GET",
      url: $('#myForm').action
      data: { form: $('#myForm').seralize() }
    }).done(function(res) {
      $('#targetDiv').html(res);
    });
  });
});

即（1）实际提交表单，然后（2）在表单提交的回调中进行我的ajax调用。

遗憾的是，这也不起作用，因为提交表单需要根据“/processFile”的响应重新加载整个页面。

我想要的是 (1)提交文件输入尽可能简单地通过 AJAX，以及 (2) 使用 URL 的响应来注入一些部分HTML。似乎您可以使用一些 iFrame 技巧（例如 http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html）来解决这个问题，但有没有我没有看到的更清洁的方法？

【问题讨论】：

can i upload a file to server by socket.io or node.js的可能重复
使用 ajax 上传文件的唯一方法是通过FormData，对于没有它的浏览器，iframe 技巧用于模拟 ajax 文件上传。
@Musa FormData 不需要使用 XHR/ajax 上传文件。您可以简单地将File 或Blob 传递给XMLHttpRequest 实例上的send(...) 方法。
@RayNicholus 让我纠正一下自己，使用 ajax 和 multipart/form-data 上传文件的唯一方法是通过 FormData‌。通过传递 blob 文件，您无法像处理常规表单帖子那样处理它们。

标签： jquery ajax forms file-upload

【解决方案1】：

如果您使用的浏览器支持 HTML5，您可以使用新的XMLHttpRequest 对象来实现这一目标。您的代码可能如下所示：

submitButton.on('click', function(ev) {
    var form = $('form')[0];
    var fd = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open(form.method, form.action, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // handle success case
        }
    };
    xhr.send(fd);
    return false;
});

如果您的客户端浏览器还不支持 HTML5 或者您无法控制它们，您可以使用文件上传插件，例如 Uploadify、jQuery.form、FineUploader，...这将测试功能浏览器并使用最合适的技术。

【讨论】：

非常好的想法 - 谢谢，没有考虑到这一点。不幸的是，我的应用程序 HTML5 是不行的。至于其他插件，我将研究它们。乍一看，iframe 选项可能是最容易实现的选项，尽管绝对不是最好的。

【解决方案2】：

我最终只是通过插件使用了 iframe 技巧：http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html

我的代码如下所示：

形式：

<form id="myForm" action="/processFile" method="post" enctype="multipart/form-data">
  <input type="file" name="uploadFile">
  <input type="submit" id="mySubmitButton" style="display: none;">
</form>
...
<button id="continueButton">Continue</button>

请注意，出于无趣的原因，我想要一个按钮，该按钮必须位于表单之外才能进行提交。

JS：

$('#continueButton').on('click', function(ev) {
  // I click the hidden submit inside the form
  $('#mySubmitButton').click();
});

$('#myForm').iframePostForm ({
  json : false  // my server response is straight HTML
  , post : function() {
    // initiation of waiting sequence
    return true; // returning false aborts the submit
  }
  , complete : function(res) {
    $('#targetDiv').html(res); // I stick the response in the target div
  }
});

让我感到困惑的一件事是这个插件的实现方式，只是调用

$('#myForm').submit();

在 continueButton 的 onclick 内不起作用。直接触发 form.submit() 必须以某种不好的方式规避 jQuery 的事件处理。所以我的解决方法（如您所见）是在表单中放置一个不可见的表单提交按钮，然后让我的外部按钮单击它。这似乎与 jQuery 和插件配合得很好。

希望这对某人有所帮助！我没有发现插件网站上的文档像我希望的那样友好。

【讨论】：