我正在尝试使用 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
这一事实有关。
最佳答案
经过大量调试和阅读大量代码后,我终于拥有了可与 Rails 3.2.8 一起使用的最新 gem。我被三个陷阱钉住了:
(1) 我在提交表单之前禁用了我的文件输入字段,这导致 remotipart 忽略它以包含在 iframe 提交中。您必须确保您的文件输入已启用。这是您看到的错误的直接原因。
(2) 在调试过程中,我用最新的上游源覆盖了 jquery.iframe-transport
,它不支持 X-Http-Accepts
iframe 中的隐藏变量。您必须使用与 remotipart gem 捆绑在一起的版本。
(3) 如果您使用的数据类型不是script
,请不要忘记在表单上连接ajax:complete 的回调。如果您没有在全局 ajax 选项中指定数据类型,或者在表单上使用数据类型属性,则这是默认设置。
关于javascript - jQuery Remotipart 发送 [object Object] 到服务器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13242988/