Блог

Вот мой код для загрузки нескольких файлов из одного каталога

     <%= 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-9s_\.-:]) (.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.");
  }
 });
  

Вы можете просто использовать драгоценный камень nested_form, написанный Райаном Бейтсом https://github.com/ryanb/nested_form чтобы решить вашу проблему, это чертовски просто, просто перейдите на страницу github, и все. Надеюсь, это вам поможет.