Jquery Cocoon gem，带预览的图像上传

我的嵌套表单不完整：

<div class="row nested-fields">
  <div class="col-lg-8 field">
    <div class="gallery-images">
      <% if f.object.picture.present? %>
        <%= image_tag f.object.picture_url, :class=> "gallery-preview-image" %>
      <% else %>
        <img class="gallery-preview-image" src="" alt="your uploaded image" />
      <% end %>
    </div>
    <div class="clearfix"></div>
    <div class="gallery-image-text">
      <%= f.label :text %><br />
      <%= f.text_field :text %>
      <%= f.hidden_field :gallery_id, :value => @gallery.id %>
    </div>
  </div>
  <div class="col-lg-4 field">
    <p>
      <%= f.label :position %><br />
      <%= f.text_field :position %>
      <%= f.file_field :picture, :id => "upload-gallery-picture", :style => "display: none;" %>
      <%= f.hidden_field :picture_cache, :value => f.object.picture_cache %>
      <%= link_to t('seller_home.gallery.upload_picture').html_safe, "javascript:;", :id => "upload-gallery-picture-link", :onclick => "browseFiles(this);" %>
    </p>
  </div>
  <div class="remove-gallery-image-link">
    <%= link_to_remove_association t('seller_home.gallery.remove').html_safe, f  %>
  </div>
</div>

“图库预览图像”%>


@gallery.id%>



“上传画廊图片”，：style=>“显示：无；”%>
f、 object.picture\u缓存%>
“上传画廊图片链接”，：onclick=>“浏览文件（此）；”%>

此外，为了上传图像和显示图像预览，我使用了以下脚本：

<script>

    function browseFiles(){
        $("#upload-gallery-picture").trigger("click");
        changeOfFile();
    }

    function changeOfFile(){
        $("#upload-gallery-picture").change(function(){
            thumbImage(this, $(this).parents('.nested-fields').find('.gallery-images').find('.gallery-preview-image'));
        });
    }

    function thumbImage(input, selecttor) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $(selecttor).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }


</script>

函数browseFiles（）{
$（“#上传画廊图片”）。触发（“单击”）；
changeOfFile（）；
}
函数changeOfFile（）{
$（“#上传画廊图片”）.change（函数（）{
thumbImage（this，$（this）.parents（'.nested fields'）.find（'.gallery images'）.find（'.gallery预览图像'））；
});
}
功能拇指图像（输入，选择器）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（选择器）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}

现在，您可以在脚本中看到每次我上传图像时，脚本文件阅读器都会读取文件并在

库预览图像中显示其预览。
问题是，每次都有部分负载。因此，对于每个嵌套字段，都有相同的
库预览图像
ID。因此，如果我将任何图像上载到任何表单，它将显示顶部表单的预览

我能做什么？
您应该使用类而不是id。id在页面上应该是唯一的。一节课可以重复

所以写

<%= f.file_field :picture, :class => "upload-gallery-picture", :style => "display: none;" %>

“上传画廊图片”，：style=>“显示：无；”%>

并相应地调整javascript，因此
改用
$（“.upload gallery picture”）