4

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

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

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

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

我试过了，但没有给出服务器错误：

Completed 500 Internal Server Error in 4ms

NoMethodError (undefined method `original_filename' for nil:NilClass):
app/controllers/data_imports_controller.rb:16:in `create'

很明显我在做一些根本错误的事情，但我需要帮助。

4

5 回答 5

3

经过大量调试和阅读大量代码后，我终于有了与 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 属性，则这是默认设置。
于 2012-11-07T08:10:44.157 回答
1

幸运的你。前段时间我遇到了完全相同的问题。:) 将此添加到您的 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

有关已采取的步骤，请参阅该存储库中的提交。

于 2012-08-14T15:42:48.910 回答
1

通过以一种我不太了解的方式徘徊，设法实现了我想要的东西，但是嘿，它有点工作。我不得不按照以下方式添加一些 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从表格中删除，否则它会发布两次或其他内容。

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

于 2012-08-15T08:21:59.783 回答
1

就我而言，我有旧版本jquery.iframe-transport.js

于 2013-06-27T07:42:11.467 回答
0

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

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

 form_for "/administration/data_imports",:remote => true,:html => {:multipart => true}
于 2012-08-14T14:56:03.200 回答