Dokumentacja: https://developer.mozilla.org/en-us/docs / Web / API / FileList
Dlaczego FileList obiekt zamiast tablicy? Jedyną właściwością jest .length i jedyną metodą, którą ma .item(), która jest zbędna (fileList[0] === fileList.item(0)).
5 odpowiedzi
Cóż, może być kilka powodów. Dla jednego, jeśli był to tablica, możesz go zmodyfikować. Nie możesz zmodyfikować instancji FileList. Po drugie, ale powiązane, może być (prawdopodobnie), widok na strukturę danych przeglądarki, więc minimalny zestaw możliwości ułatwia wdrożenia.
Możesz przekonwertować go na tablicę przez a = Array.from(theFileList) (to metoda ES2015, ale jest trywialna dla polyflistów) lub przez {X1}}.
Aktualizacja w 2018 r.: Co ciekawe, choć, Spec ma notatkę na FileList:
Interfejs
FileListnależy rozważyć "na ryzyko", ponieważ ogólny trend na platformie internetowej jest zastąpienie takich interfejsów z obiektem platformy {X1}} w ECMAScript [ECMA-262]. W szczególności oznacza to składnia rodzaju sortowaniafilelist.item(0)jest zagrożona; Większość innych programowych zastosowańFileListjest mało prawdopodobne, aby uzyskać ewentualną migrację do typuArray.
Uważam to za nieparzyste. Myślałem, że trend był w kierunku iterable, a nie Array - takich jak aktualizacja do NodeList Oznaczanie go iterable W przypadku kompatybilności ze spread składni, {x4}} i forEach.
Myślę, że jego własny typ danych, ponieważ programowanie obiektów było bardziej niż funkcjonalne programowanie, gdy został zdefiniowany. Ale nowoczesny JavaScript oferuje funkcjonalność, aby odlewać tablicę jak datatypy do tablic.
Na przykład jak opisany TIM: const files = [...filesList]
Innym sposobem ITERETATION FILLELLIST z ES6 jest metodą array.From ().
const fileListAsArray = Array.from(fileList)
Imo lepiej czytelny niż operator rozprzestrzeniania. Ale z drugiej strony dłuższy kod :)
Jeśli chcesz użyć metod macierzy na pliku FileList, spróbuj apply
Na przykład:
Array.prototype.every.call(YourFileList, file => { ... })
Jeśli chcesz użyć każdego
Oto kilka polifillów, które dodają funkcję toObject() do File i funkcji toArray() do FileList:
File.prototype.toObject = function () {
return Object({
lastModified: parseInt(this.lastModified),
lastModifiedDate: String(this.lastModifiedDate),
name: String(this.name),
size: parseInt(this.size),
type: String(this.type)
})
}
FileList.prototype.toArray = function () {
return Array.from(this).map(function (file) {
return file.toObject()
})
}
var files = document.getElementById('file-upload').files
var fileObject = files[0].toObject()
var filesArray = files.toArray()
Z ES6 możemy teraz
const files = [...filesList]
Przydatne na przykład, jeśli chcesz map