3

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

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

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

这是我在 jQuery 客户端首先尝试的方法（在查看了类似这样的问题后，通过 jQuery 中的 AJAX 提交表单）：

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）解决这个问题，但有没有更清洁的方法我不是看到？

4

2 回答 2

2

如果您使用的浏览器支持 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, ... 这将测试浏览器的功能并使用最合适的技术。

于 2013-04-07T09:37:32.533 回答
1

我最终只是通过这里的插件使用了 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 和插件配合得很好。

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

于 2013-04-07T21:50:08.893 回答