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 https://github.com/ryanb/nested_form编写的nested_form gem来解决你的问题，这很简单，只需按照github页面即可。希望对你有帮助。

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

1 个答案: