用蜻蜓上传多张图片 [英] multiple image upload with dragonfly

问题描述

我试图在Rails3中使用蜻蜓上传多张图片.我搜索了一些教程，但找不到任何教程.我找到了使用Carrierwave上传多张图片的教程，但找不到蜻蜓的运气..请提供任何帮助:)

i was trying for multiple image upload with dragonfly in rails3. i searched for some tutorials, but couldn't find any. i found a tutorial for multiple image upload with Carrierwave, but couldnt find luck with dragonfly .. any help please :)

推荐答案

前言

Dragonfly 本身通常可用于管理您项目的媒体，类似于回形针.问题本身可以归结为在Rails应用程序中上传多个文件.提供了有关此主题的一些教程，可以使用Dragonfly轻松地将其改编为模型，以在其上存储特定文件.我建议您研究一下这些内容，并尝试使其适合您的项目.

Preface

Dragonfly itself can be used to manage media for your project in general, similar to paperclip. The question itself boils down to the multiple file upload within a rails application. The some tutorials on this topic available, which can easily be adapted to models using Dragonfly for storing specific files on them. I would suggest you look into those and try to adapt them for your project.

但是，我可以提供一个最小的示例，该示例是我为当前正在开发的Rails 3.2应用程序构建的，虽然不完美(例如，验证处理)，但可以为您提供一些起点.

However, I can present a minimum example which i built for a rails 3.2 app currently in development, which isn't perfect (validation handling for example), but can give you some starting points.

仅供参考，基本思想取自

Just for reference, the essential idea is taken from here. This example is done with Rails 3.2.x.

假设您有一个假期数据库，用户可以在其中创建他们所度假的旅行报告.他们可能会留下简短的描述以及一些图片.

Let's say you have a vacation database, where users may create trip reports on vacations they took. They may leave a small description, as well as some pictures.

首先为旅行构建一个基于ActiveRecord的简单模型，现在就将其称为Trip:

Start out by building a simple ActiveRecord based model for the trips, lets just call it Trip for now:

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

如您所见，模型通过has_many关联附加了行程图像.让我们快速浏览一下TripImage模型，该模型使用蜻蜓将文件存储在content字段中:

As you can see, the model has trip images attached to it via a has_many association. Lets have a quick look at the TripImage model, which uses dragonfly for having the file stored in the content field:

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

    image_accessor :content
end

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

The trip image it self stores the file attachment. You may place any restrains within this model, e.g. file size or mime type.

让我们创建一个具有new和create动作的TripController(如果您愿意，可以通过脚手架生成它，到目前为止还算不上什么):

Let's create a TripController which has a new and create action (you can generate this via scaffolding if you like, it is by far nothing fancy):

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模型中的字段的部分文件)中的文件上载字段时，这很有意义:

Nothing special here, with the exception of creating the images from another entry than the params hash. this makes sense when looking at the the file upload field within the new.html.erb template file (or in the partial you use for the fields on the Trip model):

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

目前应该可以使用，但是目前此图像没有任何限制.您可以通过自定义验证器在Trip模型上:

This should work for the moment, however, there are no limitations for the images on this right now. You can restrict the number of images on the server side via a custom validator on the Trip model:

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中)检查文件:

I leave this up to you, but you could also use client side validations on the file field, the general idea would be to check the files upon changing the file field (in CoffeeScript):

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

摘要

您可以在现有教程中进行大量构建，因为蜻蜓在 just 上载文件方面的行为与其他解决方案没有什么不同.但是，如果您需要更高级的产品，我建议您 jQuery Fileupload ，像我面前的许多人一样.

Summary

You can build a lot out of existing tutorials, as dragonfly does not behave that differently to other solutions when it comes to just to uploading files. However, if you'd like something fancier, I'd suggest jQuery Fileupload, as many others have before me.

无论如何，我希望我能提供一些见识.

Anyways, I hope I could provide some insight.

这篇关于用蜻蜓上传多张图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！