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átuArrayBuffer
.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í zBlob
, 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 vsrc
proimg
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.abort
–abort()
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)
– naArrayBuffer
,readAsText(blob, [encoding])
– na řetězec (alternativa kTextDecoder
),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ů.