使用Remotipart的Rails AJAX上传表单

我一直在试图让AJAX上传表单正常工作。 我正在使用Rails 3.2。 我在我的Gemfile中放了gem "remotipart", "~> 1.0" ，运行bundle install并成功安装。

我以前有这个非ajax上传表单，我添加了:remote => true ，根据github页面上的文献：

  true, :remote => true %> Input File  Import Data  

这在我的data_imports_controller create动作中：

 def create file = params[:file] filename = file.original_filename end 

我在jquery.remotipart.js页面上添加了一个javascript包含，因为它感觉很重要，尽管没有明确的指示这样做。

我尝试了它，它没有给出服务器错误：

 Completed 500 Internal Server Error in 4ms NoMethodError (undefined method `original_filename' for nil:NilClass): app/controllers/data_imports_controller.rb:16:in `create' 

很明显我做了一些根本错误的事情，但我需要一只手。

Answer 1

经过大量的调试和阅读大量代码后，我终于使用了最新的gem（1.0.2）和Rails 3.2.8。 我被三个陷阱钉了：

1. 我在表单提交之前禁用了我的文件输入字段，这导致remotipart忽略它以包含在iframe提交中。 您必须确保已启用文件输入。 这可能就是您所看到的，以及为什么为’files’属性指定不同的选择器适合您。
2. 在我的调试过程中，我用最新的上游源覆盖了jquery.iframe-transport，并且它不支持iframe中的X-Http-Accepts隐藏变量。 您必须使用与remotipart gem捆绑在一起的版本。
3. 如果您使用的是’script’以外的数据类型，请不要忘记为ajax连接回调：在表单上完成。 如果未在全局ajax选项中指定dataType，或者在表单上使用data-type属性，则这是缺省值。

Answer 2

通过一种我并不理解的方式来实现某种想法的东西，但是嘿，它有点工作。 我不得不添加一些jQuery：

 $("#myform").submit(function(e) { e.preventDefault(); $.ajax(this.action, { files: $(":file", this), iframe: true }).complete( function(data) { eval(data.responseText); }); }); 

我认为接管表单提交，使用此iframe-transport lark启动ajaxpost，然后评估返回的内容（因为在我的情况下，我正在返回javascript）。 我还必须从表单中删除:remote => true ，否则它会发布两次或者其他内容。

以为我会在这里发布，以便它可以帮助某人或引导某人做得更好。

Answer 3

幸运的你。 前段时间我遇到了同样的问题。 :)将此添加到您的application.js：

 //= require jquery.remotipart //= require jquery.iframe-transport 

您可以从此处获取“iframe-transport”文件： http ： //cmlenz.github.com/jquery-iframe-transport/ 。

正如我对另一个答案的评论所说：我相信:multipart不需要:multipart ，因为你使用的是Rails 3.2。 不是100％肯定，因为我仍在使用Rails 3.1。 ;）

希望能帮助到你！

编辑

我创建了一个示例应用程序，展示了如何添加remotipart以启用AJAX文件上传。 这对我很有效。

https://github.com/RobinBrouwer/remotipart_example

请参阅该存储库中的提交以了解所执行的步骤。

Answer 4

在我的情况下，我有旧版本的jquery.iframe-transport.js

Answer 5

问题是你如何实际声明你的:multipart=> true

请使用下面的代码，然后您的表单将接受file参数。

  form_for "/administration/data_imports",:remote => true,:html => {:multipart => true}