一个完整的例子.
环境: rails 2.0.2
1 创建一个项目
rails example cd example
2 安装插件
paperclip:
svn export https://svn.thoughtbot.com/plugins/paperclip/trunk/ vendor/plugins/paperclip
paperclip让model具备附件功能,个人认为比attachment_fu更好用.
responds to parent:
svn export http://responds-to-parent.googlecode.com/svn/trunk vendor/plugins/responds_to_parent
不能用ajax来上传文件,而是用iframe来上传.iframe完成上传后需要通知母窗口,这就是responds to parent这个插件提供的功能.
3 生成基础代码
script/generate scaffold user name:string
先跑起来
rake db:migrate script/server
OK, 访问 http://localhost:3000/users
先创建一个用户: test
4 给User增加头像功能
在user.rb中,增加
has_attached_file :avatar, :styles => { :medium => "300x300>", :thumb => "100x100>" }
给users加几个字段
script/generate migration add_avatar_columns_to_user
修改migration文件:
class AddAvatarColumnsToUser < ActiveRecord::Migration def self.up add_column :users, :avatar_file_name, :string add_column :users, :avatar_content_type, :string add_column :users, :avatar_file_size, :integer end def self.down remove_column :users, :avatar_file_name remove_column :users, :avatar_content_type remove_column :users, :avatar_file_size end end
rake db:migrate
修改view文件: edit.html.erb
<h1>Editing user</h1> <%= error_messages_for :user %> <% form_for(@user, :url => formatted_user_path(@user, 'js'), :html => {:method => :put, :id => 'avatar_form', :multipart => true, :target => 'upload_frame'}) do |f| %> <p> <b>Name</b><br /> <%= f.text_field :name %> </p> <p> <b>avatar</b><br /> <div id="avatar"><%= image_tag @user.avatar.url(:medium) %></div> </p> <%= f.file_field :avatar %> <p> <%= f.submit "Update" %> </p> <% end %> <iframe id='upload_frame' name="upload_frame" style="width:1px;height:1px;border:0px" src="about:blank"></iframe> <%= link_to 'Show', @user %> | <%= link_to 'Back', users_path %>
layout文件users.html.erb中增加:
<%= javascript_include_tag :defaults %>
users_controller.rb, 修改update方法, 增加
format.js do flash[:notice] = 'avatar updated' responds_to_parent do render :update do |page| page.replace_html :avatar, image_tag(@user.avatar.url(:medium)) page[:avatar_form].reset end end end
OK, 编辑test用户, 上传一个头像试试.