Question

我有一个带有f.file_field标签的表格：

<div class="forming">
  <%= simple_form_for @product do |f| %>
    <%= f.file_field :photos, multiple: true, name: "product[photos]" %>
    <%= f.hidden_field :photos_cache %>
    <%= f.button :submit, class: "btn-primary" %>
  <% end %>
</div>

我有一个JS脚本，该脚本试图将用户选择的文件存储到一个窗口变量中：

<script>
  const productPhotos = document.getElementById("product_photos");

  const updateInputFiles = (e) => {
    const input = e.target;

    if (window.postFiles != undefined) {
      console.log(window.postFiles);
      window.postFiles = $.merge(window.postFiles, input.files);
      console.log(window.postFiles);
    } else {
      window.postFiles = input.files;
    }
  }

  productPhotos.addEventListener("change", updateInputFiles)
</script>

在合并之前和之后，我控制台都记录window.postFiles，但该值不会更改。

有人可以帮助我吗？如何使用ES6实现相同的目标？

非常感谢。

Answer 1

您应该使用传播语法：

window.postFiles = [...window.postFiles, ...input.files];

ES6合并两个FileList，以更新input.files元素

1 个答案: