Доступ к файлу из нескольких / различных файловых входов в JS Var

Question

Снимок экрана выбора файлов из разных файловых входов

Итак, как вы можете видеть, у меня есть несколько файловых входов.Это может выглядеть неловко, но у меня есть причина.

Я использую этот способ для доступа к файлу обычным способом, который var file = document.querySelector('input[type=file]').files[0];

, но он получает файл, только если я загружаю его вв первом поле ввода файла есть какой-либо способ, которым я мог получить доступ к другим элементам ввода файла.

Большое спасибо: D

Answer 1

Используйте один из других методов выбора 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
}

Answer 2

Вы должны использовать метод querySelectorAll, потому что он возвращает список узлов, а затем вы можете выполнить итерацию, бросить список и получить все, что вы хотите.querySelector метод возвращает только первое появление селектора