Javascript:了解文件接口(interface)

我正在开始使用 Javascript 并尝试了解一些基础知识。这些问题不是专门针对文件接口(interface)的，而是我想弄清楚的。

在我的 HTML 文件中，我有一个文件类型输入。

<input type="file" id="fileInput" multiple/>

然后在我的 JS 文件中我有:

var fileVar = document.getElementById('fileInput').files[0];

这很好用，filevar 的类型是 File。

现在我正在尝试了解 files 属性的工作原理。

在 W3 中，API 定义为:

 interface FileList {
      getter File? item(unsigned long index);
      readonly attribute unsigned long length;
    };

我正在尝试弄清楚如何使用 files 访问 FileList 中的各个文件。它似乎没有在任何地方定义。数组 files 来自哪里？

最佳答案

files属性返回 FileList .

files是 HTMLInputElement Interface 的属性，即 <input> 的 DOM 接口(interface)标签。它由支持 HTML5 文件 API 的浏览器实现。

要访问单个文件，您可以像任何其他列表/数组一样遍历它们。例如:

var files = element.files; //where `element` is a file input element reference
//`files` references a FileList, you can iterate over it and access its File objects
for (var i = 0; i < files.length; i++) {
    console.log('File '+ i +"'s name = " + files[i].name +
        '; size: ' + files[i].size + ' bytes');
}

Demo

MDN 有一个很好的教程 using the File API

关于Javascript:了解文件接口(interface)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15091213/