在编辑操作中上传图像的回形针输入和预览 [英] paperclip inputs and previews for uploaded images in edit action

查看:42
本文介绍了在编辑操作中上传图像的回形针输入和预览的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的是回形针和导轨 4,多张图片上传工作正常.但是,我想将其配置为最多允许上传 3 张图片,并且只显示上传图片的输入和预览.

I am using paperclip and rails 4 and multiple image uploading works correctly. However I would like to configure it to allow uploading of a maximum of 3 images and only show inputs and previews for uploaded images.

如果我从 3 个可能的图像中上传一个图像.. 然后转到编辑操作.. 它仍然显示 3 个上传输入元素而不是 2 个.并且所有这些都说没有选择文件"这不好对于用户.用户可能会在考虑添加新图像时替换图像.

If I upload an image out of the 3 possible images.. and then go to the edit action.. it still shows 3 upload input elements instead of 2. And all of them say "no file chosen" which is not good for the user. The user might replace the image while thinking they are adding a new one.

如何修改我的编辑操作或表单,以便对于填充的资产选择文件输入实际上显示上传的文件名而不是无文件 之前上传过图像或根本不显示输入元素时选择?

How can I modify my edit action or my form so that for filled assets, the choose file input actually shows the uploaded file name instead of No file chosen when an image has previously been uploaded or not show the input element at all?

我的表单域:

   <%= f.fields_for :assets do |builder| %>
    <% unless builder.object.new_record? %>
         <p>Images</p>
       <%=link_to image_tag(builder.object.attachment.url(:thumb)), builder.object.attachment.url(:original) %>
      Delete: <%= builder.check_box :_destroy %>
    <% end %>
   <% end %>

我的控制器操作:

  def new
    @post = Post.new
    3.times { @post.assets.build }
...
    end
  end


  def edit
    @post = Post.find(params[:id])  
    if @post.assets.count < 3
      3.times { @post.assets.build }
    end
  end

型号:

class Asset < ActiveRecord::Base

 belongs_to :post
 #attr_accessible :attachment
 has_attached_file :attachment, :styles => { :medium => "600x600>", :small => "200x200>", :thumb => "100x100>" }, 
 :default_url => "no_image_fr_:style.png"
 validates_attachment_content_type :attachment, :content_type => %w(image/jpeg image/jpg image/png)
end

资产表的属性

class Asset < ActiveRecord::Base {
                         :id => :integer,
                 :post_id => :integer,
                 :created_at => :datetime,
                 :updated_at => :datetime,
       :attachment_file_name => :string,
    :attachment_content_type => :string,
       :attachment_file_size => :integer,
      :attachment_updated_at => :datetime
}

编辑

所以它看起来 (3 - @assets.count).times { @assets.build } 确实构建了正确数量的资产,但无论如何它仍然显示 3 个输入元素.

So it looks the (3 - @assets.count).times { @assets.build }does build the correct number of assets but it still displays 3 input elements no matter what.

是什么原因

<%= f.fields_for :assets do |builder| %>
   <%= builder.input :attachment, as: :file, :label => "Image:", wrapper: :horizontal_file_input  %>
<% end %>

即使 assets.count = 1 ??

推荐答案

我终于找到了一个很好的方法来做到这一点

I actually finally figured out a nice way to do this

为了仅显示剩余的字段字段,我必须检查它是否仍然是新记录...即使 assets.count 是正确的,显示的字段数也不正确.此验证有帮助.

to display only the remaining field fields I had to check if it was still a new record... even though assets.count was correct, the number of fields displayed was incorrect. This verification helped.

 <% if builder.object.new_record? %>

要仅显示已填充"资产,我必须检查它是否不是新记录!

to display only the "filled" assets, I had to check if it's not a new record!

<% @post.assets.each do |ast| %>

  <% if !ast.new_record? %> 

   <%=link_to image_tag(ast.attachment.url(:thumb)), ast.attachment.url(:medium), :popup=>['original_image', 'height=700,width=900'] %>  <%= check_box_tag :_destroy %>   delete  </br></br>
   <%end%>

<% end %>

现在在编辑操作中它只显示剩余的字段...当一个资产已经被填充时,它会显示一个带有删除复选框的预览!

Now in the edit action it only shows the remaining fields... and when an asset is already filled, it shows a little preview with a deletion checkbox!

仍然好奇为什么即使 post.assets.count 是正确的,文件字段总是显示 3.

Still curious why the file fields were always showing 3 even though post.assets.count was correct.

我将赏金授予 Raj,他为寻找解决方案付出了相当大的努力.

I'm awarding the bounty to Raj who made considerable effort in trying to find a solution.

这篇关于在编辑操作中上传图像的回形针输入和预览的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆