如何输入类型文件允许从多个目录中选择多个图像并预览所有选定的图像答案

【问题标题】：How to input type file allow to select multiple image from multiple directory and preview all selected image如何输入类型文件允许从多个目录中选择多个图像并预览所有选定的图像
【发布时间】：2016-09-30 19:21:35
【问题描述】：

这是我从同一目录上传多个文件的代码

    <%= 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.");
  }
 });

【问题讨论】：

标签： jquery ruby-on-rails ajax

【解决方案1】：

您可以简单地使用 Ryan Bates https://github.com/ryanb/nested_form 编写的nested_form gem 来解决您的问题，只需按照 github 页面操作就可以了。希望对你有所帮助。

【讨论】：