javascript中的DOT.files？这是什么意思？答案

【问题标题】：DOT.files in javascript? What does it mean?javascript中的DOT.files？这是什么意思？
【发布时间】：2019-02-03 09:37:26
【问题描述】：

我目前正在处理在网上找到的文件阅读器示例代码，我需要一些帮助来破译。

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或变量文件存储为什么。

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

我想要做的是更改文件，使其循环通过一个数组来获取每个特定值，而不仅仅是一个。

【问题讨论】：

它在那里说，... .files 返回一个FileList
files 是一个 FileList，它是一个类似数组的对象（具有长度和 0,1,2... 键）
w3schools.com/jsref/prop_fileupload_files.asp, developer.mozilla.org/en-US/docs/Web/API/File, developer.mozilla.org/en-US/docs/Web/API/FileList
尽量不要向 w3schools 学习。

标签： javascript arrays string file filelist

【解决方案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");
}

【讨论】：

【解决方案2】：

.files 中的对象是FileList。它基本上像一个数组一样工作；它有一个.length，您可以使用[] 访问项目。但是编写标准的人决定将其作为自己的特殊类型的对象，而不是普通的数组。大概这是为了防止你做一些愚蠢的事情，比如用其他对象替换它的一些条目。

要遍历它，您可以执行以下操作：

for (var i = 0; i < files.length; i++) {
    var oneFile = files[i];
    // Do something with oneFile here
}

其中的每个文件都有一个File，它具有一些您可以在您发布的屏幕截图中看到的属性（name、lastModified、lastModifiedDate 等）。要从它们中获取数据，您可以使用FileReader，正如您在问题中演示的那样，但在oneFile 的循环内而不是在files[0] 的末尾进行。

【讨论】：