活用插件attachment_fu，在rails中以AJAX方式上传文件

这篇文章主要解决的问题是用attachment插件和responds_to_parent插件实现ajax方式上传文件（图片）的目的。
Step 1. Choose a file upload plugin（选择上传插件）
可用的上传插件有如下三种：
[list=]1.file_column
2.acts_as_attachment
3.attachment_fu [/list]
推荐attachment fu＋rails1.2.
Step 2. 选择安装Rmagic

gem install rmagic

Step 3. 新建项目并下载插件attachment_fu
新建项目demo

引用

rails demo

安装插件attachment_fu:

引用

cd demo
ruby script/plugin install http://svn.techno-weenie.net/projects/plugins/attachment_fu/

Step 4. 开始编写代码
用下面命令创建一个rails资源asset

引用

ruby script/generate scaffold_resource asset filename:string content_type:string size:integer width:integer height:integer parent_id:integer thumbnail:string created_at:datetime

下面是自动生成的migration，可自行修改，在此我们使用默认。

class CreateAssets < ActiveRecord::Migration
  def self.up
    create_table :assets do |t|
      t.column :filename, :string
      t.column :content_type, :string
      t.column :size, :integer
      t.column :width, :integer
      t.column :height, :integer
      t.column :parent_id, :integer
      t.column :thumbnail, :string
      t.column :created_at, :datetime
    end
  end

  def self.down
    drop_table :assets
  end
end

在模型中，我们加入以下代码：

class Asset < ActiveRecord::Base
  has_attachment  :storage => :file_system, 
                  :max_size => 1.megabytes,
            :thumbnails => { :thumb => '80x80>', :tiny => '40x40>' },
                                    :processor => :Rmagick 
end

Step 5. AJAX it
把Javascript prototype/scriptaculous 加入layout.

<%= javascript_include_tag "prototype", "effects", "application" %>

安装插件responds_to_parent

ruby script/plugin install http://sean.treadway.info/svn/plugins/responds_to_parent/

修改index.rhtml:

<% form_for(:asset, :url => formatted_assets_path(:js), 
            :html => { :multipart => true, 
            :target => 'upload_frame'}) do |form| %>
<%= render(:partial => '/assets/form', : object => form) %>
<% end %>
<iframe id='upload_frame' name="upload_frame" style="width:1px;height:1px;border:0px" src="about:blank"></iframe>
<ul id="assets">
<% @assets.each do |a|%>
<%= render(:partial => '/assets/list_item', : object => a)%>
<% end %>
</ul>

新建一个局部模版文件_form.rhtml:

<p>
    <label for="uploaded_data">Upload a file:</label>
    <%= form.file_field :uploaded_data %>
  </p>
  <p>
    <%= submit_tag "Create" %>
</p>

新建一个局部模版文件_list_item.rhtml:

<li id="asset_<%= list_item.id %>">
<%= link_to(image_tag(list_item.public_filename(:thumb))) %><br />
</li>

修改assets_controller.rb中的create方法如下：

  def create
  @asset = Asset.new(params[:asset])
  respond_to do |format|
    if @asset.save
      flash[:notice] = 'Asset was successfully created.'
      format.html { redirect_to asset_url(@asset) }
      format.xml  { head :created, :location => asset_url(@asset) }
      format.js do
        responds_to_parent do
          render :update do |page|
            page.insert_html :bottom, "assets", :partial => '/assets/list_item', : object => @asset
            page.visual_effect :highlight, "asset_#{@asset.id}" 
          end
        end          
      end
    else
      format.html { render :action => "new" }
      format.xml  { render :xml => @asset.errors.to_xml }
      format.js do
        responds_to_parent do
          render :update do |page|
              # update the page with an error message
          end
        end          
      end
    end
  end
end

最后别忘了，修改config文件夹中的database.yml文件，创建相应的数据库，并执行命令：

rake db:migrate
ruby script/server

然后到浏览器里面查看效果吧！

注：本文翻译自http://khamsouk.souvanlasy.com/。更详细的介绍请访问原文。另外本篇所介绍的内容经过测试没有问题。欢迎讨论交流