Javascript

Question

所以我试图通过 class 获取一个元素，然后存储文件 [0]。然后我尝试使用 files[0] 函数来处理文件上传。当我执行以下操作时，我收到错误消息："field.files is undefined" 在我的 firebug 控制台中。

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] 上。我需要通过 class 名称而不是 "this" 来获取它。有人可以帮我使用 class 名称而不是 "this" 来获取元素吗？谢谢。

Answer 1

getElementsByClassName()是复数。
它 returns 一个元素数组。
您需要从此数组中获取一个项目。

Answer 2

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

正如我评论的那样。 getElementsByClassName() returns 一个节点列表。 SLaks 也说过。这是一个数组对象。您可以通过索引像访问常规数组一样访问它的成员。 nodelist[index].

如果您考虑一下，这是合乎逻辑的。类名可以被多个元素使用。因此，当您通过此方法 select 时，期望多个结果是合乎逻辑的。

Javascript - 通过 Class 和文件[0] 获取元素

Javascript - Get Element By Class & files[0]

file-upload

this