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

Question

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

<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 的响应来注入(inject)一些部分内容HTML。看起来你可以使用一些 iFrame 技巧来解决这个问题(比如 http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html )，但是有没有一种我没有看到的更干净的方法？

Answer 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 ，...这将测试浏览器的功能并使用最合适的技术。