Ruby on Rails AJAX 文件上传答案

【问题标题】：Ruby on Rails AJAX file uploadRuby on Rails AJAX 文件上传
【发布时间】：2010-11-25 15:19:08
【问题描述】：

有什么简单的方法可以在 Rails 中处理 AJAX 文件上传？例如带插件

【问题讨论】：

看看this answer，与示例轻松简单的集成。

标签： ruby-on-rails ajax file-upload

【解决方案1】：

如果您使用的是 Rails 3，我编写了一个插件，可以让 AJAX 样式的文件上传实现起来相对简单。

http://rubygems.org/gems/remotipart

【讨论】：

非常棒 - 你知道任何类似的原型解决方案吗？这真是有用的东西。
我不知道任何原型风格的解决方案，但是 jQuery 代码实现起来非常简单，我无法想象修改起来会很困难。如果您愿意提供帮助，请随时在 github 上 fork Remotipart，我会将其合并到主干中。 github.com/formasfunction/remotipart
阅读这篇文章的人请注意：remotipart 有重要的错误（例如：不能处理多级引用文本，这是 2 年以来已知的），并且 repo 所有者没有积极尝试修复这个问题.因此，在您浪费时间（就像我所做的那样）实施它然后用另一个解决方案替换它之前，请考虑这一点。

【解决方案2】：

JQuery File Upload 是一个非常活跃和通用的文件上传小部件项目。

在此处查看演示：http://blueimp.github.com/jQuery-File-Upload/

这是一颗宝石：http://rubygems.org/gems/jquery.fileupload-rails

该 wiki 也有 Rails 示例：https://github.com/blueimp/jQuery-File-Upload/wiki

【讨论】：

【解决方案3】：

实际上没有必要为此使用一些特殊的插件。对我来说，上传 ajax 图片的最简单方法就是制作上传图片的表单，使其表现得像 ajax。为此，我使用 ajaxForm jQuery 插件：http://www.malsup.com/jquery/form/ 不如返回js上传的图片放到你的页面中。

所以，你应该让你的表单是 ajaxForm：

$('#uploader').ajaxForm({dataType: "script",
         success: ajaxFormErrorHandler,
         error: ajaxFormSuccessHandler
}

控制器看起来像这样：

  def add_photo
    @photo = PhotosMeasurement.new(params[:user_photo])
    respond_to do |format|
      if @photo.save
         format.json { render :json =>  @photo}
      else
         format.json { render :json =>  nil}
      end
    end
  end

在 ajaxFormSuccessHandler 中，您只需获取图片对象：

var photo = jQuery.parseJSON(responseText.responseText);

把照片放在你喜欢的地方：

target.find('.addPhoto').before(''+
       '<input class="imageId" type="hidden" value='+photo.id+' > '+
       '<img src='+photo.photo.thumb.url+' alt="Thumb_1"> ');

P.S：不知道为什么，但如果你返回 ajaxForm 处理程序，它会将请求处理为错误而不是成功。

P.P.S：当然 jQuery-File-Upload 插件做得更多，但如果你不需要所有这些，你可以使用这种方式。

P.P.P.S：您应该已经有功能性的非 ajax 文件上传功能 =)

【讨论】：

【解决方案4】：

您可以使用Jquery Form

下载jquery.form.min.js并放到vendor/assets/javascripts文件夹
在您的 application.js 中

//= 需要 jquery.form
在您看来（haml 示例）：

= form_for user,authenticity_token: true, :multipart => true, id: 'user_form' do |f|

  = f.label :avatar, t("user.avatar")

  = f.file_field :avatar，接受：'image/png,image/gif,image/jpeg'

  = f.submit t(user.new_record? ? 'add' : 'update'), 类：'btn btn-primary'，数据：{disable_with: t(user.new_record? ? 'adding' : 'updating')}

:javascript

  $('#user_form').ajaxForm()
这是 Rails 应用示例https://github.com/serghei-topor/ajax-file-upload-rails-sample

【讨论】：