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

这篇文章主要解决的问题是用attachment插件和responds_to_parent插件实现ajax方式上传文件（图片）的目的。
[b]Step 1. Choose a file upload plugin（选择上传插件）[/b]
可用的上传插件有如下三种：
[list=]1.file_column
2.acts_as_attachment
3.attachment_fu [/list]
推荐attachment fu＋rails1.2.
[b]Step 2. 选择安装Rmagic [/b]
[code]gem install rmagic[/code]
[b]Step 3. 新建项目并下载插件attachment_fu[/b]
新建项目demo
[quote]rails demo[/quote]
安装插件attachment_fu:
[quote]cd demo
ruby script/plugin install http://svn.techno-weenie.net/projects/plugins/attachment_fu/[/quote]
[b]Step 4. 开始编写代码[/b]
用下面命令创建一个rails资源asset
[quote]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[/quote]
下面是自动生成的migration，可自行修改，在此我们使用默认。
[code]
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
[/code]
[b]在模型中，我们加入以下代码：[/b]
[code]class Asset < ActiveRecord::Base
has_attachment :storage => :file_system,
:max_size => 1.megabytes,
:thumbnails => { :thumb => '80x80>', :tiny => '40x40>' },
:processor => :Rmagick
end[/code]

[b]Step 5. AJAX it[/b]
把Javascript prototype/scriptaculous 加入layout.
[code]<%= javascript_include_tag "prototype", "effects", "application" %>[/code]
[b]安装插件responds_to_parent[/b]
[code]ruby script/plugin install http://sean.treadway.info/svn/plugins/responds_to_parent/[/code]
[b]修改index.rhtml:[/b]
[code]<% 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>[/code]
[b]新建一个局部模版文件_form.rhtml:[/b]
[code]<p>
<label for="uploaded_data">Upload a file:</label>
<%= form.file_field :uploaded_data %>
</p>
<p>
<%= submit_tag "Create" %>
</p>[/code]
[b]新建一个局部模版文件_list_item.rhtml:[/b]
[code]<li id="asset_<%= list_item.id %>">
<%= link_to(image_tag(list_item.public_filename(:thumb))) %><br />
</li>[/code]
[b]修改assets_controller.rb中的create方法如下：[/b]
[code] 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[/code]
[b]最后别忘了，修改config文件夹中的database.yml文件，创建相应的数据库，并执行命令：[/b]
[code]rake db:migrate
ruby script/server[/code]
[b]然后到浏览器里面查看效果吧！

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