用蜻蜓多个图像上传

时间:2011-10-03 12:17:02

标签: ruby-on-rails-3 image-uploading dragonfly-gem

我正在尝试使用rails3中的dragonfly进行多个图片上传。我搜索了一些教程,但无法找到。我找到了一个使用Carrierwave上传多个图像的教程,但是找不到蜻蜓的运气..任何帮助请:)

1 个答案:

答案 0 :(得分:10)

前言

Dragonfly本身可用于管理项目的媒体,类似于paperclip。问题本身归结为rails应用程序中的多文件上传。有关该主题的一些教程可以很容易地适用于使用Dragonfly存储特定文件的模型。我建议你研究一下,并尝试根据你的项目进行调整。

但是,我可以提供一个最小的例子,我为当前正在开发的rails 3.2应用程序构建,这不是完美的(例如验证处理),但可以给你一些起点。

实施例

仅供参考,基本想法来自here。这个例子是用Rails 3.2.x完成的。

假设您有一个度假数据库,用户可以在假期数据库中创建旅行报告。他们可能会留下一些小描述,以及一些照片。

首先为旅行建立一个简单的基于ActiveRecord的模型,现在就让我们称之为Trip

class Trip < ActiveRecord::Base
    has_many :trip_images
    attr_accessible :description, :trip_images
end

如您所见,该模型通过has_many关联附加了旅程图像。让我们快速浏览TripImage模型,该模型使用dragonfly将文件存储在内容字段中:

class TripImage < ActiveRecord::Base
    attr_accessible :content, :trip_id
    belongs_to :trip_id

    image_accessor :content
end

它自己存储文件附件的旅行图像。您可以在此模型中放置任何约束,例如文件大小或mime类型。

让我们创建一个TripController,其中包含newcreate操作(如果您愿意,您可以通过脚手架生成此内容,但目前还没有任何想象力):

class TripController < ApplicationController
    def new
        @trip = Trip.new
    end

    def create 
        @trip = Trip.new(params[:template])

        #create the images from the params
        unless params[:images].nil?
            params[:images].each do |image|
            @trip.trip_images << TripImages.create(:content => image)
        end
        if @trip.save
            [...] 
    end
end

这里没什么特别的,除了从params哈希之外的其他条目创建图像。在查看new.html.erb模板文件中的文件上传字段(或用于Trip模型中的字段的部分文件)时,这是有意义的:

[...]
<%= f.file_field :trip_images, :name => 'images[]', :multiple => true %>
[...]

这应该暂时有效,但是现在对此图像没有限制。您可以通过Trip型号上的custom validator限制服务器端的图片数量:

class Trip < ActiveRecord::Base
    has_many :trip_images
    attr_accessible :description, :trip_images
    validate :image_count_in_bounds, :on => :create

protected
    def image_count_in_bounds
        return if trip_images.blank?
        errors.add("Only 10 images are allowed!") if trip_images.length > 10
    end
end

我把这个留给你,但你也可以在文件字段上使用客户端验证,一般的想法是在更改文件字段时检查文件(在CoffeeScript中):

jQuery ->
    $('#file_field_id').change () ->
         #disable the form
         for file in this.files
             #check each file  
         #enable the form

摘要

您可以使用现有教程构建大量内容,因为当涉及到 上传文件时,dragonfly的行为与其他解决方案的行为不同。但是,如果你想要更高级的东西,我建议jQuery Fileupload,就像许多其他人在我面前一样。

无论如何,我希望我能提供一些见解。