Javascript: Comprensione dell'interfaccia File

Question

Ho iniziato con Javascript e sto cercando di capire alcuni aspetti fondamentali. Le domande non riguardano specificamente l'interfaccia File, ma è ciò che sto cercando di capire.

Nel mio file HTML ho un input di tipo di file.

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

Poi nel mio file JS ho:

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

Questo funziona bene ed è di tipo filevar File.

Ora sto cercando di capire come funziona l'attributo files.

Nel W3 l'API è definito come:

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

Sto cercando di capire come posso accedere ai singoli file di in FileList utilizzando files. Non sembra essere definito da nessuna parte. Da dove proviene l'array files?

Answer 1

La proprietà files restituisce un FileList.

files è una proprietà della HTMLInputElement Interface, cioè l'interfaccia DOM per <input> tag. È implementato dai browser che supportano l'API del file HTML5.

Per accedere a singoli file, è possibile scorrere semplicemente su di essi come qualsiasi altro elenco/matrice. Es .:

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 ha un bel tutorial per using the File API pure.