繭寶石，圖片上傳與預覽

我有我的嵌套形式分：繭寶石，圖片上傳與預覽

<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>

而且，上傳圖像和顯示我用下面的腳本，圖像預覽：

<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>

現在，您可以在每次上傳圖像時在腳本中看到腳本文件讀取器讀取文件並在gallery-preview-image中顯示其預覽。問題是，每次部分加載。因此，對於每個嵌套字段，都有相同的gallery-preview-image ID。因此，如果我將任何圖像上傳到任何形式，它會將預覽顯示到頂部表單。

我該怎麼辦？

來源

2015-04-03 Emu

你應該使用一個類而不是一個id。一個id在頁面上應該是唯一的。一個類可以重複。

所以寫

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

並相應地調整你的JavaScript，因此使用$(".upload-gallery-picture")代替。

來源

2015-04-03 10:17:03 nathanvda

繭寶石，圖片上傳與預覽

回答

相關問題