Soubor a FileReader

Objekt File dědí z Blob a je rozšířen o možnosti související se souborovým systémem.

Existují dva způsoby, jak jej získat.

Nejprve je zde konstruktor podobný Blob :

new File(fileParts, fileName, [options])
  • fileParts – je pole hodnot Blob/BufferSource/String.
  • fileName – řetězec názvu souboru.
  • options – volitelný objekt:
    • lastModified – časové razítko (celé číslo) poslední úpravy.

Za druhé, častěji dostáváme soubor z <input type="file"> nebo drag'n'drop nebo jiná rozhraní prohlížeče. V takovém případě soubor získá tyto informace z OS.

Jako File dědí z Blob , File objekty mají stejné vlastnosti a navíc:

  • name – název souboru,
  • lastModified – časové razítko poslední úpravy.

Takto můžeme získat File objekt z <input type="file"> :

<input type="file" onchange="showFile(this)">

<script>
function showFile(input) {
  let file = input.files[0];

  alert(`File name: ${file.name}`); // e.g my.png
  alert(`Last modified: ${file.lastModified}`); // e.g 1552830408824
}
</script>
Poznámka:

Vstup může vybrat více souborů, takže input.files je s nimi objekt podobný poli. Zde máme pouze jeden soubor, takže vezmeme pouze input.files[0] .

FileReader

FileReader je objekt, jehož jediným účelem je číst data z Blob (a tedy File taky) objekty.

Doručuje data pomocí událostí, protože čtení z disku může nějakou dobu trvat.

Konstruktor:

let reader = new FileReader(); // no arguments

Hlavní metody:

  • readAsArrayBuffer(blob) – číst data v binárním formátu ArrayBuffer .
  • readAsText(blob, [encoding]) – číst data jako textový řetězec s daným kódováním (utf-8 ve výchozím nastavení).
  • readAsDataURL(blob) – přečíst binární data a zakódovat je jako data URL base64.
  • abort() – zrušit operaci.

Volba read* závisí na tom, jaký formát preferujeme a jak data použijeme.

  • readAsArrayBuffer – pro binární soubory k provádění nízkoúrovňových binárních operací. Pro operace na vysoké úrovni, jako je krájení, File dědí z Blob , takže je můžeme volat přímo, bez čtení.
  • readAsText – pro textové soubory, když chceme získat řetězec.
  • readAsDataURL – když chceme tato data použít v src pro img nebo jinou značku. K tomu existuje alternativa ke čtení souboru, jak je popsáno v kapitole Blob:URL.createObjectURL(file) .

Jak čtení pokračuje, dochází k událostem:

  • loadstart – načítání zahájeno.
  • progress – dochází při čtení.
  • load – žádné chyby, čtení dokončeno.
  • abortabort() volal.
  • error – došlo k chybě.
  • loadend – čtení skončilo úspěchem nebo neúspěchem.

Po dokončení čtení můžeme přistupovat k výsledku jako:

  • reader.result je výsledek (pokud bude úspěšný)
  • reader.error je chyba (pokud selže).

Nejpoužívanějšími událostmi jsou určitě load a error .

Zde je příklad čtení souboru:

<input type="file" onchange="readFile(this)">

<script>
function readFile(input) {
  let file = input.files[0];

  let reader = new FileReader();

  reader.readAsText(file);

  reader.onload = function() {
    console.log(reader.result);
  };

  reader.onerror = function() {
    console.log(reader.error);
  };

}
</script>
FileReader pro kapky

Jak je uvedeno v kapitole Blob, FileReader umí číst nejen soubory, ale i jakékoli bloby.

Můžeme jej použít k převodu objektu blob do jiného formátu:

  • readAsArrayBuffer(blob) – na ArrayBuffer ,
  • readAsText(blob, [encoding]) – na řetězec (alternativa k TextDecoder ),
  • readAsDataURL(blob) – na adresu URL data base64.
FileReaderSync je k dispozici v rámci Web Workers

Pro Web Workers existuje také synchronní varianta FileReader s názvem FileReaderSync.

Jeho metody čtení read* negenerují události, ale spíše vracejí výsledek, jako to dělají běžné funkce.

To je však pouze uvnitř Web Worker, protože zpoždění v synchronních voláních, která jsou možná při čtení ze souborů ve Web Worker, jsou méně důležitá. Nemají vliv na stránku.

Shrnutí

File objekty dědí z Blob .

Kromě Blob metody a vlastnosti, File objekty mají také name a lastModified vlastnosti plus vnitřní schopnost číst ze souborového systému. Obvykle dostáváme File objekty z uživatelského vstupu, například <input> nebo Drag’n’Drop události (ondragend ).

FileReader objekty lze číst ze souboru nebo blob v jednom ze tří formátů:

  • Řetězec (readAsText ).
  • ArrayBuffer (readAsArrayBuffer ).
  • Adresa URL dat, kódování base-64 (readAsDataURL ).

V mnoha případech však nemusíme číst obsah souboru. Stejně jako jsme to udělali s bloby, můžeme vytvořit krátkou adresu URL s URL.createObjectURL(file) a přiřaďte jej <a> nebo <img> . Tímto způsobem lze soubor stáhnout nebo zobrazit jako obrázek, jako součást plátna atd.

A pokud máme poslat File přes síť, to je také snadné:síťové API jako XMLHttpRequest nebo fetch nativně přijímá File objektů.