从多个/不同文件INPUTS访问文件到JS Var

Posted 2021-04-13

Screenshot of choosing files from different file inputs

所以你可以看到我有多个文件输入。它可能看起来很尴尬，但我有理由。

我用这种方式以通常的方式访问文件，这是var file = document.querySelector('input[type=file]').files[0];

但只有当我将其上传到第一个文件输入框时它才能获取文件是否有任何方法可以访问其他文件输入元素。

非常感谢：D

答案

使用其他DOM选择方法之一，如querySelectorAll()，getElementsByClassName，getElementsByTagName等，一次可以选择多个元素。

例如，querySelectorAll将返回一个NodeList，一个包含所有选定元素的对象数组。然后迭代该列表或使用直接访问来获取元素。

var inputs = document.querySelectorAll('input[type=file]');
inputs.forEach(input=>{
  //deal with each input
  let file = input.files[0];
  //use file
});

//or if using older browser that doesn't have NodeList#forEach
for(let i=0; i<inputs.length; i++){
  let file = inputs[i].files[0];
  //use file
}

另一答案

您应该使用querySelectorAll方法，因为它返回节点列表，然后您可以迭代抛出列表并获得所需的一切。 querySelector方法仅返回选择器的第一个外观