javascript - jQuery Remotipart 发送 [object Object] 到服务器

Question

我正在尝试使用 ajax 将文件上传到我的 Rails 应用程序。为方便起见，我包含了 jQuery.remotipart gem .

// app/assets/javascripts/application.js
//= require jquery.remotipart

我有一个用于上传文件的表单。这些文件由 CarrierWave 处理。

<%= form_for @import, remote: true do |f| %>
  <fieldset>
    <%= f.label :file, "Attach a CSV file" %>
    <%= f.file_field :file %>
  </fieldset>
  <%= f.submit :upload %>

<% end -%>

不幸的是，当我提交带有附件的表单时，它似乎没有正确到达我的 Controller 操作。 params 哈希将 JS 对象字符串化为键。

Started POST "/file_imports" for 127.0.0.1 at 2012-11-06 01:00:49 +0000
Processing by FileImportsController#create as JS
  Parameters: {"object Object"=>{","=>{"object Object"=>{","=>{"object Object"=>nil}}}}}`

在 Chrome 的 Dev Tools 中，我可以看到这确实是发送到服务器的表单数据:

当我删除 remote: true 时，表单可以完美运行(当然，在这种情况下，它会发送 HTML 请求而不是 JS 请求)。

有人知道我做错了什么吗？顺便说一句，我使用的是 Rails 3.2.8 和 Remotipart 1.0.2(最新)。

编辑:进行了更多挖掘。

查看 Remotipart 源代码，我似乎无法理解它应该做什么。例如，在 vendor/assets/javascripts/jquery.remotipart.js 中，第 22 行有以下内容:

settings.data = form.serializeArray();

再往下一点，设置通过 $.rails.ajax(settings) 发送到服务器。

$.fn.serializeArray() 方法返回一个 JS 对象数组。如果我们将它们分配给对 jQuery.ajax() 的调用的数据属性，这将解释我在服务器上看到的序列化对象参数。我们需要传递一个对象作为数据属性，而不是对象数组？

但是，当我尝试将数组展平为一个对象时，整个过程就崩溃了，一个 HTML 请求而不是 JS 请求被发送到服务器。我认为这与 jQuery.ajax.processData == false 这一事实有关。

我有一个 issue on the Remotipart Github .

Answer 1

经过大量调试和阅读大量代码后，我终于拥有了可与 Rails 3.2.8 一起使用的最新 gem。我被三个陷阱钉住了:

(1) 我在提交表单之前禁用了我的文件输入字段，这导致 remotipart 忽略它以包含在 iframe 提交中。您必须确保您的文件输入已启用。这是您看到的错误的直接原因。

(2) 在调试过程中，我用最新的上游源覆盖了 jquery.iframe-transport，它不支持 X-Http-Accepts iframe 中的隐藏变量。您必须使用与 remotipart gem 捆绑在一起的版本。

(3) 如果您使用的数据类型不是script，请不要忘记在表单上连接ajax:complete 的回调。如果您没有在全局 ajax 选项中指定数据类型，或者在表单上使用数据类型属性，则这是默认设置。