Question

Screenshot of choosing files from different file inputs

因此您可以看到我有多个文件输入。可能看起来很尴尬，但我有理由。

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

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

非常感谢：D

Answer 1

您应该使用querySelectorAll方法，因为它返回节点列表，然后可以迭代抛出该列表并获取所需的所有内容。 querySelector方法仅返回选择器的首次出现

Answer 2

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

例如，

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
}

从多个/不同的文件输入访问文件到JS Var

2 个答案: