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

我試圖找出我如何通過使用files訪問文件列表中的單個文件的。它似乎沒有被定義在任何地方。數組files來自哪裏？

Answer 1

該files財產返回FileList。

files是HTMLInputElement Interface的屬性，也就是<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'); 
} 

Demo

MDN有using the File API一個很好的教程爲好。