使用 Remotipart 的 Rails AJAX 上传表单

Question

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

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

<%= form_tag "/administration/data_imports", :multipart => true, :remote => true %>  
    <label for="file">Input File</label> <%= file_field_tag "file" %>
    <button type="submit">Import Data</button>
</form>

这在我的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

就我而言，我使用的是旧版本的 jquery.iframe-transport.js

Answer 2

经过大量调试和阅读大量代码后，我终于有了与 Rails 3.2.8 配合使用的最新 gem (1.0.2)。我被三个陷阱钉住了：

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

Answer 3

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

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

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

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

希望对你有帮助！

编辑

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

https://github.com/RobinBrouwer/remotipart_example

查看该存储库中的提交以了解所采取的步骤。

Answer 4

通过以一种我不太了解的方式犹豫不决，成功地实现了我想要的目标，但是嘿，它有点工作。我不得不按照以下方式添加一些 jQuery：

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

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

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

Answer 5

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

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

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