jQuery Remotipart发送[对象对象]到服务器

我想用ajax上传文件到我的Rails应用程序。为了方便这个，我已经包含了jQuery.remotipart gem。jQuery Remotipart发送[对象对象]到服务器

// 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 -%>

不幸的是，当我提交表单与附加文件，它似乎并没有在我的控制器动作正确的到达。 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的开发工具，我可以看到，这确实是一个被发送到服务器的表单数据：

Form data being sent to server

的形式完美的作品，当我删除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。

来源

2012-11-06 David Tuite

这些参数看起来真的很厉害。你确定所有的先决条件的JavaScript加载？你也不需要清单中的所有路径，单独使用application.js应该没问题。 – RadBrad

该清单中的评论实际上并不存在，我只是想指出该应用程序的哪个文件“// = require jquery.manifest”所在的位置。对于混淆的道歉。我确定我要求一切。我有jQuery然后jquery_ujs然后jquery.remotipart按顺序。 –

没问题。一切看起来正确。你在你原来的文章中说'一个文件'，但remotipart是关于'多部分'上传。你有没有想过删除'remotipart'宝石，只是试图获得基本的文件上传与'单一'文件上传工作？那么，一旦你了解了单个文件上传的基本机制，然后在相同的文章中引入'remoteipart'来处理多个文件上传？ – RadBrad

经过大量的调试和阅读大量的代码后，我终于找到了最新的与Rails 3.2.8一起工作的gem。我被三个陷阱钉住了：

（1）我在表单提交之前禁用了我的文件输入字段，导致remotipart忽略它以包含在iframe提交中。您必须确保您的文件输入已启用。这是你所看到的错误的直接原因。（2）在我的调试过程中，我使用最新的上游源代替jquery.iframe-transport，并且它不支持iframe中的X-Http-Accepts隐藏变量。您必须使用与remotipart gem捆绑在一起的版本。（3）不要忘记连接ajax的回调函数：如果您使用的数据类型不是script，则在表单上填写完整的表单。如果您未在全局ajax选项中指定dataType，或者在表单上使用data-type属性，则这是默认值。

来源

2012-11-07 08:06:57

重写jquery.iframe-transport也是我的问题的根源。感谢你找出了马特。 –

jQuery Remotipart发送[对象对象]到服务器

回答

相关问题