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

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，我试图打印文件的长度，它的长度是1，所以访问第二个文件似乎不起作用。

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

文档方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回null。

如果需要与指定选择器匹配的所有元素的列表，则应改用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

如果我没有弄错你的问题，那么你应该在你的文件输入上附加更改事件，并使用它来获取文件值，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>

​