Javascript:了解文件界面

Question

我开始使用Javascript并尝试理解一些基础知识.问题不是关于文件界面,而是我想弄清楚的.

在我的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;
    };

我试图找出如何通过使用来访问FileList中的单个文件files.它似乎没有在任何地方定义.阵列files来自哪里？

Answer 1

该files物业返回一个FileList.

files是HTMLInputElementInterface的属性,即<input>标记的DOM接口.它由支持HTML5 File API的浏览器实现.

要访问单个文件,您可以像任何其他List/Array一样迭代它们.例如:

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');
}

演示

MDN也有一个很好的使用File API的教程.