无法接受多个文件作为 HTML 和 JS 的输入

Question

我的代码在 pug/html

            .form__group.form__photo-upload
              label.label__photo(for='photo') Product Images
              input.form__upload_product_images(type='file', id="files" name="files" ,style="display:none;")

js代码

const uploadProductImages = document.querySelector(
  '.form__upload_product_images'
);
  uploadProductImages.multiple = true;

我无法选择多个文件，我尝试通过硬代码和 js dom 添加多个属性，如果有人修复了请帮忙！

Answer 1

const uploadProductImages = document.querySelector('#files');
const fileNames = document.querySelector('#filenames');

// to display selected files when user chooses them
uploadProductImages.addEventListener('change', function () {
  const fileList = uploadProductImages.files;

  // Looping through the selected files and adding each file name
  for (let i = 0; i < fileList.length; i++) {
    let p = document.createElement('p');
    p.innerHTML = fileList[i].name;
    fileNames.appendChild(p);
  }
});

<input type="file" id="files" name="files" multiple>
<div id="filenames"></div>