Javascript: Understanding File interface

Question

Zaczynam z Javascriptem i próbuję zrozumieć niektóre podstawy. Pytania nie dotyczą konkretnie interfejsu plików, ale staram się to rozgryźć.

W moim pliku HTML mam dane wejściowe typu pliku.

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

Wtedy w moim pliku JS mam:

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

To działa prawidłowo i filevar jest typu File.

Teraz próbuję zrozumieć, jak działa atrybut files.

W W3 API jest definiowany jako:

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

Próbuję dowiedzieć się, w jaki sposób mogę uzyskać dostęp do pojedynczego pliku jest w FileList za pomocą files. Nie wydaje się być zdefiniowany nigdzie. Skąd pochodzi tablica files?

Answer 1

Właściwość files zwraca wartość FileList.

files jest własnością HTMLInputElement Interface, czyli interfejsu DOM dla tagów . Jest on implementowany przez przeglądarki obsługujące interfejs API pliku HTML5.

Aby uzyskać dostęp do pojedynczych plików, możesz je po prostu powtórzyć, tak jak każdą inną Listę/Array. Np .:

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 ma ładny poradnik dla using the File API również.