javascript - 无法从表单访问这两个文件

Question

    <form   name=”myForm” enctype=”multipart/form-data” >
    <div class="row pt-2 pl-3">

       <div class="col-md-5 pl-0 position-relative ">
            <!-- <input type="file" accept=".xlsx, .xls" class="input-file"> -->

            <div class="wrappeer">
              <div class="file-upload">
                <small> Drag & drop or browse  file to upload!</small> &nbsp;
                <input type="file" name="input-file" accept=".xlsx, .xls" id="input-file" />
                <i class="fa fa-arrow-up"></i>
              </div>
            </div> 

        </div>
    </div>

    <div class="row pt-2 pl-3">
      <div class="col-md-10 position-relative p-0">
        <!-- <input type="file" accept=".xlsx, .xls" class="input-file-2"> -->

        <div class="wrappeer-2">
          <div class="file-upload-2">
            <small> Drag & drop or browse  file to upload!</small> &nbsp;
            <input type="file" name="input-file" accept=".xlsx, .xls" id="input-file-2" />
            <i class="fa fa-arrow-up"></i>
          </div>
        </div> 

      </div>

  </div>

  <div class="pt-5 text-left pb-4">
    <button type="submit" class="button--light btn-next">SUBMIT</button> 
  </div>
  </form>

这是我的 upload.js 我尝试打印文件的长度，但它的长度只是一个，因此访问第二个文件似乎不起作用。

const form = document.querySelector('form')
form.addEventListener('submit', e => {
 const formData = new FormData()
  console.log(document.querySelector('[type=file]').files);

  debugger
  const file = document.querySelector('[type=file]').files[0];
  console.log(document.querySelector('[type=file]').files[1]);



)

我们需要读取这两个文件并将它们作为 formData 发送。

Answer 1

问题是你的选择器:

document.querySelector // just returns one node

在你的情况下你需要

document.querySelectorAll(node)// It will get you a collection of nodes

MDN docs :

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead.

const form = document.querySelector('form')
form.addEventListener('submit', e => {
  e.preventDefault();
  const formData = new FormData();
  const fileInputs = document.querySelectorAll('[type=file]');
  console.log(fileInputs.length);
  fileInputs.forEach(input => console.log(input.files))

})

<form name=”myForm” enctype=”multipart/form-data”>
  <div class="row pt-2 pl-3">

    <div class="col-md-5 pl-0 position-relative ">
      <!-- <input type="file" accept=".xlsx, .xls" class="input-file"> -->

      <div class="wrappeer">
        <div class="file-upload">
          <small> Drag & drop or browse  file to upload!</small> &nbsp;
          <input type="file" name="input-file" accept=".xlsx, .xls" id="input-file" />
          <i class="fa fa-arrow-up"></i>
        </div>
      </div>

    </div>
  </div>

  <div class="row pt-2 pl-3">
    <div class="col-md-10 position-relative p-0">
      <!-- <input type="file" accept=".xlsx, .xls" class="input-file-2"> -->

      <div class="wrappeer-2">
        <div class="file-upload-2">
          <small> Drag & drop or browse  file to upload!</small> &nbsp;
          <input type="file" name="input-file" accept=".xlsx, .xls" id="input-file-2" />
          <i class="fa fa-arrow-up"></i>
        </div>
      </div>

    </div>

  </div>

  <div class="pt-5 text-left pb-4">
    <button type="submit" class="button--light btn-next">SUBMIT</button>
  </div>
</form>