Rails 4使用Paperclip嵌套表单图像预览

Question

我有两种模式：

class Photo < ActiveRecord::Base
  has_many :pictures, dependent: :destroy
  accepts_nested_attributes_for :pictures
end

class Picture < ActiveRecord::Base
  belongs_to :photo
  has_attached_file :image, styles => 
  {
     :thumb => "200x200#"
  }
end

这是我的表单（只粘贴相关的嵌套部分）：

<%= simple_nested_for @photo, html: {multipart: true} do |f| %>
 <%= f.simple_fields_for :picture_contents do |p| %>
    <%= p.input :image, as: :file, label: "ADD PHOTO", :label_html => {class: "fileBt"}, :input_html => {class: "fileBt", id: "pictureInput", accept:"image/*"}, :item_wrapper_tag => :div, :item_wrapper_class => "col-md-4" %>
<div class="target"></div>
   <%= a.link_to_remove "REMOVE", :class => "btn btn-danger btn-xs" %>
<div>
<%= f.link_to_add "ADD", :pictures, class: "fileBt" %>
</div>
<% end -%>

我希望能够预览每个嵌套表单。现在我可以设法显示第一张图片的预览，但是当我添加第二张嵌套表格时，我无法显示它的预览。我需要能够为每个上传的图像显示预览。

这是我正在使用的javascript（信用转到comment）：

$(function() {
  $('#pictureInput').on('change', function(event) {
  var files = event.target.files;
  var image = files[0]
  var reader = new FileReader();
  reader.onload = function(file) {
  var img = new Image();
  console.log(file);
  img.src = file.target.result;
  $('.target').html(img);
}
reader.readAsDataURL(image);
console.log(files);
});
});

非常感谢任何帮助。

Answer 1

我不确定这是不是问题，但您不应该有多个具有相同ID的HTML元素。尝试更改JS，以便它使用文件字段类。

$(function() {
  $('.fileBt').on('change', function(event) {
...

请注意，您可能希望将该类重命名为更有意义且特定于图像上载字段的内容。例如＆＃34; .photo-upload-field＆＃34;会工作:)）