Ruby on Rails CarrierWave gem 是否适用于 Ajax？答案

【问题标题】：Does the Ruby on Rails CarrierWave gem work with Ajax?Ruby on Rails CarrierWave gem 是否适用于 Ajax？
【发布时间】：2012-02-25 06:40:40
【问题描述】：

由于某种原因，将 CarrierWave gem 与 Ajax 一起使用似乎对我不起作用。难道我做错了什么？我很好地遵循了 253 CarrierWave Railscast，它在没有 AJAX 的情况下工作，但在我的应用程序中我需要使用 AJAX。这是我的代码：

在图片文件字段中选择jpeg后的params列表：

Parameters: {"item"=>{"remote_image_url"=>""}}

new.html.erb：

<%= form_for(@item, :url => create_item_path, :html => {:id => "create_item_form", :multipart => true}) do |f| %>
    <p>
      <%= f.file_field :image %>
    </p>
    <p>
      <%= f.label :remote_image_url, "or image URL" %><br />
      <%= f.text_field :remote_image_url %>
    </p>
    <%= f.submit "Save", :id => "save_button" %>
<% end %>

应用程序.js

$("#create_item_form").submit(function() {
    $.ajax({
      type: "POST",
      url: $(this).attr("action"),
      dataType: "script",
      data:  $("#destination_item").sortable('serialize') + "&" + $(this).serialize()
      });
      return false;
});

item.rb

class Item < ActiveRecord::Base
  attr_accessible :description, :image, :remote_image_url
  belongs_to :user
  has_many :item_sub
  mount_uploader :image, ImageUploader
end

schema.rb

  create_table "item", :force => true do |t|
    t.integer  "user_id"
    t.string   "title"
    t.string   "image"
    t.datetime "created_at"
    t.datetime "updated_at"
  end

我的 gemfile 中有carrierwave gem，我没有更改app/uploaders/image_uploader.rb 中的任何内容。

感谢您的帮助！

【问题讨论】：

标签： ruby-on-rails ajax jquery carrierwave

【解决方案1】：

如果不使用像 Uploadify 这样的库，什么都做不了。这是因为 XMLHttpRequest (AJAX) 标准不支持文件上传。你可以真正伪造的唯一方法是使用带有 Flash 的 iFrame。 Uploadify 是这些选项中最好的，它有最好的文档。这是必须在客户端（浏览器）上完成的工作。 Uploadify 真的不是一个 ruby gem，它是 flash 和 js 的集合，允许浏览器“伪造它”。

在服务器端，您可以使用carrierwave 来支持上传，但您需要一种从客户端获取它们的方法。这是一个非常相似的问题，应该为您提供所需的说明。

Rails Carrier Wave with JQuery Uploader

希望这会有所帮助，

乔

【讨论】：

那你会给我赏金吗？
如下面的另一个答案所述，除非您需要支持旧版浏览器 XHR2 已经支持 FormData 一段时间了。如果您可以使用它并且只回退到其他库以获得旧版支持，那么值得一试。
此时此答案已过时。 HTML5 具有允许通过 AJAX 上传文件的 FormData 和 File API。请参阅here 了解更多信息。

【解决方案2】：

您现在可以通过 ajax 上传文件，而无需使用 FormData() 使用外部库

见：LINK 1 & LINK 2

【讨论】：

【解决方案3】：

你不能像这样通过 ajax 上传文件。你需要类似的东西： http://www.uploadify.com/

【讨论】：

为什么做不到？是不是因为 CarrierWave 不支持 Ajax 提交？我正在尝试使用最少量的宝石。谢谢
因为 XMLHttpRequest 不支持文件上传。
想解释一下否决票？我的答案与接受的答案相同，甚至在它之前就已回答。我们现在知道，您确实可以在现代浏览器中使用 ajax 进行文件上传，但如果您想支持较旧的浏览器（IE8），您仍然需要解决方法。