活用插件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/。更详细的介绍请访问原文。另外本篇所介绍的内容经过测试没有问题。欢迎讨论交流

评论

18 楼 blueanson 2008-03-05  

请问一下，attachment_fu对应的表结构

1.可否少一些字段，不记录一些需要的记录

2.可否将所有的:thumbnails类型，比如缩略图，小图，大图，不要分开多点记录存储，而是一条记录多个字段

谢谢

17 楼 Auckland 2008-01-18  

我也参考

http://clarkware.com/cgi/blosxom/2007/02/24

自己写了个小demo。所需要的 东西都安装了，程序运行也没有题。
但是没有缩略图，只有原大小的图片。
rails 环境是 2.0.1，rmagic 2.1.0

  has_attachment :content_type => :image, 
                 :storage => :file_system, 
                 :max_size => 500.kilobytes,
                 :thumbnails => { :thumb => '80x90>',:processor => :Rmagick  }

好象是rmagick没有生成thumbnails.只是把原图上传到文件系统了。
怎样解决呢？

16 楼 weskycn 2007-11-15  

已发送到第一个邮箱里了，查收

15 楼 zxwilde 2007-11-15  

[e-mail]

[e-mail]

麻烦你了，谢谢！

14 楼 weskycn 2007-11-13  

呵呵，附件demo1.rar里就有responds_to_parent这个插件，直接拷贝到/vender/plugin/下就可以了

13 楼 weskycn 2007-11-13  

给我你的邮箱，我直接发给你。

12 楼 zxwilde 2007-11-12  

http://sean.treadway.info/svn/plugins/responds_to_parent/ 
该地址无法下载安装responds_to_parent插件，不知道，是不是我自身的问题。
Plugin not found: ["http://sean.treadway.info/svn/plugins/responds_to_parent/"]

11 楼 weskycn 2007-11-08  

你是把rmagic安装到插件里了么？rmagic不应该在vender下面。

10 楼 zyyseu 2007-11-07  

楼主客气了.
按着你所给的介绍安装rmagick的方法进行安装,还是不行,不知道问题出在哪...
我用的是netbean的开发环境,内嵌的jruby

9 楼 weskycn 2007-11-06  

不好意思，这几天一直没有上javaeye！

rmagick是gem到ruby里的，我觉得你应该检查下你的rmagic安装是否正确，参考资料：http://www.iteye.com/topic/69518

另外，如果还不行，继续在下面发帖子。尽量帮你弄好。

8 楼 zyyseu 2007-11-04  

跑了你的程序,缩略图显示不出来,楼主,大概是什么原因呢?

7 楼 zyyseu 2007-11-02  

我用的是netbean,刚学着用的,还不熟
但是在project的vender目录下有几个需要安装的插件的,rmagick,和attachment_fu都有

6 楼 weskycn 2007-11-02  

插件没有装好吧？你把具体错误贴出来，还有，rmagic装了吗？

你看看附件里我做的例子吧（新增）。We.Sky

5 楼 zyyseu 2007-11-02  

undefined method `has_attachment' for Asset:Class

这个错误怎么办?

4 楼 weskycn 2007-10-12  

:cry:

3 楼 weskycn 2007-09-16  

请问您的rails版本是多少？最起码要rails_1.2.3的。

2 楼 luodongju325 2007-09-14  

在controller的creat中可以这样写吧,我怎么会报错呀
<img src="/images/rails.png"/>bject => @asset

1 楼 luodongju325 2007-09-14  

第4步的时候我是用上面的代码创建asset,但总是出现
"could't find 'scaffold_resource' generator