带有 JQuery Uploader 的 Rails Carrier Wave

Posted 2023-05-09

【中文标题】带有 JQuery Uploader 的 Rails Carrier Wave

【英文标题】：Rails Carrier Wave with JQuery Uploader

【发布时间】：2012-01-11 22:01:08

【问题描述】：

我在rails tutorial 上使用带有 JQuery Upload 的 Rails Carrier Wave，但是当我点击上传按钮时出现错误：

Error: SyntaxError: JSON.parse

任何建议/建议都非常受欢迎。

【问题讨论】：

编辑了您的帖子：请使用纯文本而不是图像链接，尤其是对于此类简短的错误消息（如果您的链接中断，您的问题将无法再被理解）。此外，如果您提供更多信息，例如实际代码（ui 脚本、控制器操作...），对您的帮助会更简单

【参考方案1】：

为什么不试试Uploadify？

步骤 1

将gem 'carrier_wave' 添加到您的 Gemfile。

第二步

将此代码保存到/lib/flash_session_cookie_middleware.rb:

require 'rack/utils'

class FlashSessionCookieMiddleware
  def initialize app, session_key = '_session_id'
    @app = app
    @session_key = session_key
  end

  def call env
    if env['HTTP_USER_AGENT'] =~ /^(Adobe|Shockwave) Flash/
      request = Rack::Request.new env
      env['HTTP_COOKIE'] = [@session_key, request.params[@session_key]].join('=').freeze unless request.params[@session_key].nil?
      env['HTTP_ACCEPT'] = "#request.params['_http_accept']".freeze unless request.params['_http_accept'].nil?
    end

    @app.call env
  end
end

第三步

编辑session_store.rb并将此代码添加到文件末尾：

Rails.application.config.middleware.insert_before(
  ActionDispatch::Session::CookieStore,
  FlashSessionCookieMiddleware,
  Rails.application.config.session_options[:key]
)

第四步

下载Uploadify并解压。

第 5 步

复制jquery.uploadify.v2.1.4.min.js和swfobject.js到 /app/assets/javascripts 如果您使用 Rails 3.1 或更高版本；到 /public/javascripts 如果您使用 Rails 3.0 或更早版本。 将uploadify.swf 和cancel.png 复制到/app/assets/images/ 或 /public/images。 将uploadify.css 复制到/app/assets/stylesheets/ 或 /public/stylesheets.

第 6 步

编辑您的 application.js 并在下面插入：

//= require swfobject
//= require jquery.uploadify

第 7 步

在你上传的页面，添加这个：

<input id="uploadify" name="uploadify" type="file"/>

第 8 步

将此代码添加到您的上传脚本中：

$(document).ready(function() 
  <% key = Rails.application.config.session_options[:key] %>
  var uploadify_script_data = ;
  var csrf_param = $('meta[name=csrf-param]').attr('content');
  var csrf_token = $('meta[name=csrf-token]').attr('content');
  uploadify_script_data[csrf_param] = encodeURI(encodeURIComponent(csrf_token));
  uploadify_script_data['<%= key %>'] = '<%= cookies[key] %>';

  $('#uploadify').uploadify(
    uploader        : '/assets/uploadify.swf',
    script          : '/photos',
    cancelImg       : '/images/cancel.png',
    auto            : true,
    multi           : true,
    removeCompleted     : true,
    scriptData      : uploadify_script_data,
    onComplete      : function(event, ID, fileObj, doc, data) 
    
  );
);

第 9 步

这样写你的控制器：

def create
  @photo = Photo.new image: params[:file_data]
  @photo.save
end

注意：这是使用 Uploadify 2.1.4 测试的。

【讨论】：

我想是因为 CarrierWave 不需要 8 个步骤即可开始工作：p

你能扩展第 9 步吗？我收到 HTTP 错误。我怎么知道它是否正确返回？

好像免费版只支持flash，所以不会用。

【参考方案2】：

嘿，我也在使用 uploadify，但这个 JS 插件不需要 Flash，而且在美学上更讨人喜欢，也就是“更漂亮”。我根据一些示例创建了一个演示应用程序，

这是一个简单的案例，你可以从中学到很多：

https://github.com/jalagrange/bootstrap_uploader

希望这会有所帮助！