rails inested form jquery изображение preview

Question

Im использование рельсов с jquery вложенной форме. Как просмотреть изображение, которое я хочу загрузить в свой собственный тег изображения. На приведенной выше картинке. Каждый раз, когда я добавляю новое изображение, он будет рассмотрен на первом теге изображения.

это мой HTML-код:

<%= f.fields_for :product_images do |builder| %> 

    <div class="row"> 
    <div class="col-xs-6"> 

     <div class="form-group"> 
     <%= f.label 'Upload Image' %> 
     <%= builder.file_field :image, class: 'form-control', onchange: 'readURL(this);' %> 
     <small class="pull-right"> 
      <%= builder.link_to_remove "Remove this image" %> 
     </small> 
     </div> 

    </div> 

    <div class="col-xs-6"> 
     <div class="form-group"> 
     <%= f.label 'Image: ' %> <br> 
     <%= image_tag builder.object.image_url(:small), id: 'img_prev' if builder.object.image_url.present? %> 
     </div> 
    </div> 
    </div> 

    <% end %> 

    <div class="form-group"> 
    <%= f.link_to_add "Add image", :product_images, class: 'btn btn-success' %> 
    </div> 

<% end %> 

и мой JQuery скрипт:

// image preview 
function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
     $('#img_prev') 
      .attr('src', e.target.result) 
      // .width(150); 
      .height(100); 
     }; 

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

Answer 1

JQuery:

// Set image preview on selection 
function readURL(input, div_id) { 
    div_id = "#" + div_id; 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     $(div_id).attr('src', e.target.result); 
    } 
    reader.readAsDataURL(input.files[0]); 
    } 
} 

Rails:

<%= f.fields_for :pictures do |pic| %> 
    <%= pic.file_field :picture, :onChange => "readURL(this, #{pic.index})" %> 
    <img id="<%= pic.index %>" src="<%= image_url 'image-placeholder.png' %>"> 
<% end %>