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)).

81
Vladimir Kornea 16 sierpień 2014, 00:10

5 odpowiedzi

Najlepsza odpowiedź

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 FileList należ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 sortowania filelist.item(0) jest zagrożona; Większość innych programowych zastosowań FileList jest mało prawdopodobne, aby uzyskać ewentualną migrację do typu Array.

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.

99
T.J. Crowder 15 listopad 2019, 09:45

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 :)

12
Andrew Furman 7 maj 2020, 04:54

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

6
machnicki 18 sierpień 2016, 20:32

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()
0
Kodie Grantham 21 sierpień 2018, 15:07

Z ES6 możemy teraz

const files = [...filesList]

Przydatne na przykład, jeśli chcesz map

33
Tim 5 maj 2017, 04:24