DOT.files 在 javascript 中？这是什么意思？

Question

我目前正在处理在线找到的文件示例代码 reader，我需要一些帮助来破译它。

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

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

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

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

正如您在问题中所展示的那样，其中的每个文件都有一个 File, which has some properties that you can see in the screenshot you posted (name, lastModified, lastModifiedDate, etc.). To get the data out of each of them, you can use a FileReader，但是在 oneFile 的循环内而不是在 files[0] 的末尾进行。

Answer 2

当查看一个对象的控制台日志时，如果它是一个实例对象（即由构造函数制成），它的详细信息前面会有一个名称。在这种情况下，名称是 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");
}

DOT.files 在 javascript 中？这是什么意思？

DOT.files in javascript? What does it mean?

javascript

arrays

string

file

filelist