使用JQuery上传器的Rails载波

Question

我在这个rails tutorial上使用Rails Carrier Wave和JQuery上传，但是当我点击上传按钮时出错：

Error: SyntaxError: JSON.parse

任何建议/建议都很受欢迎。

Answer 1

为什么不试试Uploadify？

第1步

将gem 'carrier_wave'添加到Gemfile。

第2步

将此代码保存到/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

第3步

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

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

第4步

下载Uploadify并解压缩。

第5步

1. 将jquery.uploadify.v2.1.4.min.js和swfobject.js复制到 /app/assets/javascripts如果您使用Rails 3.1或更高版本;至 /public/javascripts如果您使用Rails 3.0或更早版本。
2. 将uploadify.swf和cancel.png复制到/app/assets/images/或 /public/images。
3. 将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测试的。

Answer 2

嘿我也使用了uploadify，但是这个JS插件不需要Flash，而且更加美观，又称“漂亮”。我用一些例子创建了一个演示应用程序，

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

https://github.com/jalagrange/bootstrap_uploader

希望这有帮助！