如何輸入類型的文件允許從多個目錄中選擇多個圖像和預覽所有選定的圖像

Question

這裏我的代碼從同一目錄

<%= f.fields_for :product_images do |p| %> 
      <%= p.file_field :image, :multiple => true, :accept=>'image/*', name: "product_images[image][]" %> 
    <% end %> 

上傳多個文件，但現在我想從多個目錄中上傳多個圖像多個文件瀏覽。

<div id="dvPreview" class="preview-area"></div> 

我正在使用div來預覽與文件讀取器選定的圖像。

$('.rightInfobutton').on('change','#product_product_images_attributes_0_image' , function(){ 
    if (typeof (FileReader) != "undefined") { 
     var dvPreview = $("#dvPreview"); 
     dvPreview.html(""); 
     var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; 
     $($(this)[0].files).each(function() { 
      var file = $(this); 
      if (regex.test(file[0].name.toLowerCase())) { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        var img = $("<img />"); 
        img.attr("style", "height:100px;width: 100px"); 
        img.attr("src", e.target.result); 
        dvPreview.append(img); 
       } 
       reader.readAsDataURL(file[0]); 
      } else { 
       alert(file[0].name + " is not a valid image file."); 
       dvPreview.html(""); 
       return false; 
      } 
     }); 
    } else { 
     alert("This browser does not support HTML5 FileReader."); 
    } 
}); 

Answer 1

您可以簡單地使用由Ryan貝茨https://github.com/ryanb/nested_form書面nested_form寶石爲了解決你的問題很容易該死只要按照GitHub的頁面，這一切。 希望能幫到你。