Ruby on Rails 中文 Wiki
Ajax Upload By Using Attachment_fu (changes)

显示修订历史自 #2 至 #3: 添加 | 移除

使用插件attachment_fu在Rails中以AJAX方式上传文件

原文：http://weskycn.javaeye.com/blog/123777

这篇文章主要解决的问题是用attachment插件和responds_to_parent插件实现ajax方式上传文件（图片）的目的。

Step 1. Choose a file upload plugin（选择上传插件）

可用的上传插件有如下三种：
1.file_column
2.acts_as_attachment
3.attachment_fu

推荐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

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

 
rake db:migrate   
ruby script/server

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

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

另外，本文还将结合FCKeditor讲述如何把自己已经上传的图片文件插入FCKeditor编辑器框里。coming soon