Javascript - 按类和文件获取元素[0]

Question

所以我试图通过类获取一个元素，然后存储 File[0]。我尝试使用 files[0] 函数来处理文件上传。当我执行以下操作时，我在 Firebug 控制台中收到错误:“field.files 未定义”。

document.querySelector('#afile').addEventListener('change', function(e) {
var field = document.getElementsByClassName('File');
var file = field.files[0];

当我将代码更改为以下内容时，它可以工作

document.querySelector('#afile').addEventListener('change', function(e) {
var file = this.files[0];

所以我认为问题出在 var file = field.files[0] 上。我需要通过类名而不是“this”来获取它。有人可以帮我使用类名而不是“this”来获取元素吗？谢谢。

Answer 1

var field = document.getElementsByClassName('File');
var file = field[0].files[0];

正如我评论的那样。 getElementsByClassName() 返回一个节点列表。斯拉克斯也这么说。这是一个数组对象。您可以像通过索引访问常规数组一样访问它的成员。 节点列表[索引]。

如果你仔细想想，这是合乎逻辑的。类名可以由多个元素使用。因此，当您通过此方法进行选择时，期望多个结果是合乎逻辑的。