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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从多个/不同文件INPUTS访问文件到JS Var相关的知识,希望对你有一定的参考价值。

Screenshot of choosing files from different file inputs

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

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

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

非常感谢:D

答案

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

例如,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方法仅返回选择器的第一个外观

以上是关于从多个/不同文件INPUTS访问文件到JS Var的主要内容,如果未能解决你的问题,请参考以下文章

如何自动将文件从多个 Azure VM 复制到 Azure 存储并访问

从不同的 .js 文件中访问来自 1 个 .js 源文件 (jqTree) 的变量以覆盖方法

Heroku:如何让它访问多个 .js 文件

从外部 JS 文件中获取表单

从 Blender 加载 Three.js 中的多个对象

从 AWS 开发工具包访问多个配置文件 - Python