如何使用带有paperclilp的Remotipart上传图像并在表单上显示缩略图

时间:2012-03-07 09:57:39

标签: ruby-on-rails-3.2 asyncfileupload

我正在使用paperclip和Rails 3.2

我已经安装了Remotipart宝石。

我的模型有图像附件:

class Resource < ActiveRecord::Base
     has_attached_file :image, :styles => { :thumb => "50x50>", :small => "150x150>", :medium => "200x200>" },
                                :storage        => :s3,
                                :s3_credentials => "#{Rails.root}/config/s3.yml",
                                :path           => ':attachment/:id/:style.:extension'

      validates_attachment_presence :image
      validates_attachment_size :image, :less_than => 5.megabytes
      validates_attachment_content_type :image, :content_type => ['image/jpeg', 'image/png']
     end

以下是表格:

<%= form_for @resource, :html => { :class => 'form-horizontal' } do |f| %>
  <fieldset>
    <legend><%= controller.action_name.capitalize %> Resource</legend>

    <div class="control-group">
      <%= f.label :title, :class => 'control-label' %>
      <div class="controls">
        <%= f.text_field :title, :class => 'text_field' %>
      </div>
    </div>

    <div class="control-group">
      <%= f.label :url, :class => 'control-label' %>
      <div class="controls">
        <%= f.text_field :url, :class => 'text_field' %>
      </div>
    </div>

    <div class="control-group">
      <%= f.label :description, :class => 'control-label' %>
      <div class="controls">
        <%= f.text_field :description, :class => 'text_field' %>
      </div>
    </div>

    <div class="control-group">
      <%= f.label :author, :class => 'control-label' %>
      <div class="controls">
        <%= f.text_field :author, :class => 'text_field' %>
      </div>
    </div>

    <div class="control-group">
      <%= f.label :price, :class => 'control-label' %>
      <div class="controls">
        <%= f.number_field :price, :class => 'number_field' %>
      </div>
    </div>

    <div class="control-group">
      <%= f.label :category_id, :class => 'control-label' %>
      <div class="controls">
        <%= f.collection_select(:category_id, Category.all, :id, :name, {:prompt => 'Please select a Category'}) %>
      </div>
    </div>


  <div class="control-group">
      <%= f.label 'file types', :class => 'control-label' %>
      <div class="controls">      
        <% Filetype.all.each do |filetype| %>
        <%=check_box_tag "resource[filetype_ids][]", filetype.id, @resource.filetypes.include?(filetype) %>
        <%=filetype.abbreviation %>
      <% end %>
    </div>  
  </div>

 <div class="control-group">
      <%= f.label :image, :class => 'control-label' %>
      <div class="controls">   
        <%= f.file_field :image %>
      </div>
</div>
    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', resources_path, :class => 'btn' %>
    </div>
  </fieldset>

我希望能够在选择文件时上传文件,然后向用户显示缩略图。据我所知,Remotipart应该有助于简化这一过程,但我不知道如何使它工作。

有人指出我正确的方向吗?

更新: 我希望能够仅使用ajax上传文件,以便可以显示上传图像的缩略图。因此表单本身可能不会通过ajax提交,但文件上载应该是。

有什么办法吗?

1 个答案:

答案 0 :(得分:0)

您是否阅读过remotipart的文档?这是通过ajax进行远程表单上传。你没有远程表格。

请参阅https://github.com/JangoSteve/remotipart

好消息是你可能根本不需要使用remotipart!