javascript - javascript 中的 DOT. 文件？这是什么意思？

Question

我目前正在研究在线找到的文件阅读器示例代码，我需要一些帮助来解密。

function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
        alert('Please select a file!');
        return;
    }
    //var file = files[0];
    var reader = new FileReader();
    reader.readAsText(files[0], "UTF-8");

在这部分代码中，我想知道javascript如何解释document.getElementById('files').files中的.files或变量文件存储为什么。

我在设置它后立即打印出文件以查看它在控制台中打印的内容，但我仍然不明白它的含义。

我想做的是更改文件，以便它循环遍历一个数组以获取每个特定值，而不是仅一个。

Answer 1

当查看一个对象的控制台日志时，如果它是一个实例对象(即由构造函数创建)，它将在其详细信息之前有一个名称。在本例中，该名称为 FileList。您可以在搜索查询中使用该名称来查找有关其结构和其他详细信息的信息。

例如，搜索“javascript FileList”，最重要的结果之一将是 MDN's documentation about that structure .

简单来说，它只是一个类似数组的对象。这意味着它具有保存其项目(文件)的数字属性键，以及告诉其保存的项目数的 length 属性。

有了这个，您应该意识到您可以使用常规 for 循环来迭代其内容

for(let i=0; i<files.length; i++){
  let file=files[i];
  console.log(file.name);
}

注意 FileList 还有一个 Symbol.iterator这意味着它可以创建自己的迭代器。因此，这意味着您还可以使用 for ... of 结构的循环

for(let file of files){
  console.log(file.name);
}

如果您想使用 FileReader 读取每个文件，您将需要调用您在循环内使用的代码

for(let file of files){
    var reader = new FileReader();
    reader.onloadend = function(){
       //store data somewhere
    }
    reader.readAsText(file, "UTF-8");
}