не может получить доступ к обоим файлам из формы

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>

и вот моя загрузка. 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 :

Метод Document querySelector() возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается ноль.

Если вам нужен список всех элементов, соответствующих указанным селекторам, вам следует использовать querySelectorAll().

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>

Answer 2

Если я правильно понял вашу проблему, то вы должны прикрепить событие change к вашему входу файла и использовать его для получения значений файлов, document.querySelector вернет только объект DOM и прикрепит событие ко всем входным файлам.

проверьте мой пример.

const file =document.querySelector('[type=file]');
// file varaibale is DOM tag and have not .file attribute.
console.log(file);

// to read the information of the file you need to triger file reader on upload event for example.
function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // use the 1st file from the list
    f = files[0];

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
        return function(e) {
           console.log(theFile)
          //console.log( e.target.result );
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsText(f);
  }

  document.getElementById('upload').addEventListener('change', handleFileSelect, false);

test <input type="file" name="upload" id="upload">
<div id="html"></div>