15 Aug 2012

使用AjaxUpload和Carrierwave在Rails Mongoid中批量上传图片

file-uploader是一个用 Javascrit 编写的文件上传 Libary,在这里我使用CarrierWaveMongoid 来完成多文件的无刷新上传功能

RubyGems

gem 'mongoid', '3.0.4'
gem 'carrierwave', '0.6.2'
gem 'carrierwave-mongoid', :github => 'jnicklas/carrierwave-mongoid', :branch => 'mongoid-3.0' 
gem 'mini_magick', '3.4'
gem 'rack-raw-upload', '1.1.0'

Model

class Screenshot
  include Mongoid::Document
  include Mongoid::Timestamps::Created
  include Rails.application.routes.url_helpers

  attr_accessible :image 
  field :image 

  mount_uploader :image, ScreenshotUploader 

end

Controller

class ScreenshotsController < ApplicationController

  def index
    @screenshots = Screenshot.all.desc(:created_at)

    respond_to do |format|
      format.html # index.html.erb    
      format.js{ render :layout => false}
    end
  end

  def create
    file = params[:qqfile].is_a?(ActionDispatch::Http::UploadedFile) ? params[:qqfile] : params[:file]
    @screenshot = Screenshot.new
    @screenshot.image = file
    if @screenshot.save
      render json: { success: true, src: @screenshot.to_json }
    else
      render json: @screenshot.errors.to_json
    end
  end

  def destroy
    @screenshot = Screenshot.find(params[:id])
    @screenshot.destroy

    respond_to do |format|
      format.html { redirect_to screenshots_path }
      format.js{ 
        @screenshots = Screenshot.all.desc(:created_at)
        render :layout => false
      }
    end

  end

end

Uploader

# encoding: utf-8
require "digest/md5"
require 'carrierwave/processing/mini_magick'

class ScreenshotUploader < CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick

  storage :file

  # Override the directory where uploaded files will be stored.
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end


  process :convert => 'png'

  # Create different versions of your uploaded files:
  version :thumb do
    process :resize_to_fill => [120, 120]
  end

  # Add a white list of extensions which are allowed to be uploaded.
  def extension_white_list
    %w(jpg jpeg gif png)
  end

  # Override the filename of the uploaded files:
  # see http://huacnlee.com/blog/carrierwave-upload-store-file-name-config/
  def filename
    if super.present?
      # current_path 是 Carrierwave 上传过程临时创建的一个文件,有时间标记,所以它将是唯一的
      @name ||= Digest::MD5.hexdigest(File.dirname(current_path))
      "[email protected]}.#{file.extension.downcase}"
    end
  end
end

Javascript

  $(document).ready(function(){

    var uploader = new qq.FileUploader({
      debug: true,
      allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
      sizeLimit: 1048576, // max size: 1MB
      minSizeLimit: 0, // min size
      multiple: true,
      element: document.getElementById('file-uploader'),
      action: '<%= screenshots_path %>',
      onComplete: function(id, fileName, responseJSON){
        $.getScript("<%= screenshots_path %>");
      },
      onSubmit: function(id, fileName) {
        uploader.setParams({
          xx: "xx",
          yy: 'yy',
          zz: 'zz',       
          authenticity_token: "<%= form_authenticity_token.to_s %>"
        });
      }
    });

});

你可以在 https://github.com/huobazi/ajax-upload-with-carrierwave-mongoid下载完整的示例代码

30 Mar 2010

在rails中不同的view不同皮肤下的js,css,注入js和css到head区域

利用layout可以很好实现这个需求.

在ApplicationHelper内加入如下代码:

def require_js(path)
    content_for :header_js do
      include_js_tag path
    end
  end

  def require_css(path)
    content_for :header_css do
      include_css_tag path
    end
  end

  def include_js_tag(path)
    if not path.starts_with?("http:")
      path = "/themes/#{@setting[:theme]}/javascripts/" + path
    end
    javascript_include_tag path
  end

   def include_css_tag(path)
    if not path.starts_with?("http:")
      path = "/themes/#{@setting[:theme]}/stylesheets/" + path
    end
    stylesheet_link_tag path
  end

(如果你要直接在view或者layout内引入css则可以<%= include_css_tag "global.css" %>,这样生成的路径是带有皮肤目录的)

接下来,修改你的layout的head,加入如下代码:

<%= yield :header_js %>
<%= yield :header_css %>

然后在需要引入js的View内

<% require_js "jquery/jquery.tools.min.js" %>
<% require_js "jquery/jquery.colorbox.min.js" %>

最后run一下,你会看到会在html的head内生成如下html

<script src="/themes/2010v1/javascripts/jquery/jquery.tools.min.js?1269949149" type="text/javascript"></script>
<script src="/themes/2010v1/javascripts/jquery/jquery.colorbox.min.js?1269949147" type="text/javascript"></script>