从 multiple/Different 文件访问文件输入到 JS Var

Question

Screenshot of choosing files from different file inputs

如您所见，我有多个文件输入。这可能看起来很尴尬，但我有理由。

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

但只有当我将文件上传到第一个文件输入框时它才会获取文件，有什么方法可以访问其他文件输入元素。

非常感谢:D

Answer 1

你应该使用 querySelectorAll 方法，因为它 returns 节点列表，然后你可以迭代抛出列表并获得你想要的一切。 querySelector方法returns选择器只第一次出现

Answer 2

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

例如，

querySelectorAll 将 return 一个 NodeList，一个包含所有 selected 元素的类似对象的数组。然后遍历该列表或使用直接访问来获取元素。

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
}

从 multiple/Different 文件访问文件输入到 JS Var

Accessing File from multiple/Different File INPUTS to JS Var

html

javascript

jquery

jquery-selectors