通过 rails remotipart gem 上传 ajax 文件答案

【问题标题】：ajax fileupload through rails remotipart gem通过 rails remotipart gem 上传 ajax 文件
【发布时间】：2013-02-18 10:46:16
【问题描述】：

我一直在尝试通过remotipart 和carrierwave 上传图片。只需 fileupload 工作正常，我还安装了 remotipart gem，它可以通过 ajax 上传文件。现在的问题是如何通过 ajax 发送文件（我的意思是 jquery 部分）。

这就是我试图将文件发送到我的控制器的方式，但它不起作用

$("#upload").live("submit",function(e) {

    e.preventDefault();
    var report ={};
    report.file =$("#new_upload").find('#upload_name').val(); 

    $.ajax(this.action, {
        data:  report,
        iframe: true,
        processData: false
    }).complete(function(data) {
        console.log(data);
    });
});

这是我的表单代码：

<%= form_for(@upload,:url => { :action => "save_remotipart" },:html => {:multipart => true },:remote => (params[:action] ==  true )) do |f| %>

  <fieldset>
    <legend class='required'>
      Required fields
    </legend>
      <div class="field">
        <%= f.label :name %><br />
        <%= f.file_field :name %>
      </div>
    </fieldset>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

提交表单时没有参数发送到服务器。在中止我得到这个：

{"object Object"=>nil}

请帮帮我。

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3 carrierwave remotipart

【解决方案1】：

您不必执行 $("#upload").live(){}，将 :remote => true 添加到表单将执行 Ajax 提交并正确完成文件上传。

我在我的一个项目中使用它（参见下面的表单代码）

<%= simple_form_for @post, :remote => true, :multipart => true do |f| %>

            <%= f.input :content, :label => false, :input_html => { :rows => '2', :id => "ibtb" } %>


        <%= f.input :file, :label => false %>

        <%= f.button :submit, "Post" %>
<% end %>

我正在使用 simple_form gem，但它也应该适用于普通表单，因为它们最后都会生成 HTML。 github 页面中 gem 的示例也没有使用 simple_form。

希望这会有所帮助。

【讨论】：

如果我有多个同名但数据不同的文件以及其他输入数据怎么办？
您想提供以同一个表单上传多个文件的功能吗？
是的 .. 同名，这些输入将动态生成。
嗨@RaghavanKandala，当您通过ajax 上传文件时，您是否遇到了一条消息，该消息永远不会停止显示在导航器（firefox）的底部，即“从[localhost] 传输数据”跨度>
我的 simple_form 不能与 remotipart 一起使用，不知道为什么，但是如果我制作自己的按钮和侦听器（即不是 :submit 按钮），并在 javascript 中手动提交表单，它可以使用 remotipart ：:javascript $(document).ready(function(){ $("#ajax-create-public-image-form-btn").click(function(e){ $form = $('#ajax-create-public-image-form'); $form.submit(); }); });

【解决方案2】：

我遇到了同样的问题。按照此链接可能会有所帮助。 http://www.javaroots.com/2015/04/asynchronous-file-uploads-in-rails.html#disqus_thread

【讨论】：