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

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 Bates 编写的nested_form gem https://github.com/ryanb/nested_form为了解决你的问题，非常简单，只需关注 github 页面即可。希望对您有帮助。