Práce se soubory v JavaScriptu, Část 3:Události a chyby průběhu

FileReader objekt slouží ke čtení dat ze souborů, které jsou zpřístupněny prostřednictvím prohlížeče. V mém předchozím příspěvku jste se naučili používat FileReader objekt pro snadné čtení dat ze souboru v různých formátech. FileReader je velmi podobný XMLHttpRequest mnoha způsoby.

Události průběhu

Události průběhu jsou tak běžné, že jsou ve skutečnosti zapsány v samostatné specifikaci ¹ . Tyto události jsou navrženy tak, aby obecně indikovaly průběh datových přenosů. K takovým přenosům dochází při požadavku na data ze serveru, ale také při požadavku na data z disku, což je FileReader ano.

Existuje šest událostí postupu:

• loadstart – označuje, že proces načítání dat začal. Tato událost se vždy spustí jako první.
• progress – při načítání dat se několikrát spouští a poskytuje přístup k mezilehlým datům.
• error – spustí se při selhání načítání.
• abort – spustí se, když bylo načítání dat zrušeno voláním abort() (k dispozici na obou XMLHttpRequest a FileReader ).
• load – spustí se pouze tehdy, když byla všechna data úspěšně načtena.
• loadend – spustí se, když objekt dokončí přenos dat. Vždy se spouští a vždy se spustí po error , abort nebo load .

Dvě události, error a load , byly diskutovány v mém předchozím příspěvku. Ostatní události vám poskytují jemnější kontrolu nad datovými přenosy.

Sledování pokroku

Pokud chcete sledovat průběh čtečky souborů, použijte progress událost. event objekt pro tuto událost obsahuje tři vlastnosti pro sledování přenášených dat:

• lengthComputable – logická hodnota udávající, zda prohlížeč dokáže určit úplnou velikost dat.
• loaded – počet bajtů, které již byly přečteny.
• total – celkový počet bajtů ke čtení.

Záměrem těchto dat je umožnit generování ukazatelů průběhu pomocí informací z progress událost. Můžete například používat HTML5 <progress> prvek pro sledování průběhu čtení souboru. Hodnotu průběhu můžete spojit se skutečnými daty pomocí kódu takto:

var reader = new FileReader(),
     progressNode = document.getElementById("my-progress");

reader.onprogress = function(event) {
    if (event.lengthComputable) {
        progressNode.max = event.total;
        progressNode.value = event.loaded;
    }
};

reader.onloadend = function(event) {
    var contents = event.target.result,
        error    = event.target.error;
 
    if (error != null) {
        console.error("File could not be read! Code " + error.code);
    } else {
        progressNode.max = 1;
        progressNode.value = 1;
        console.log("Contents: " + contents);
    }
};

reader.readAsText(file);

Jedná se o podobný přístup, který Gmail používá pro implementaci nahrávání souborů přetažením, kde ihned po vložení souboru do e-mailu uvidíte ukazatel průběhu. Tento ukazatel průběhu ukazuje, kolik souborů bylo přeneseno na server.

Zacházení s chybami

I když čtete místní soubor, stále se může stát, že čtení selže. Specifikace API souboru ² definuje čtyři typy chyb:

• NotFoundError – soubor nelze najít.
• SecurityError – něco v souboru nebo čtení je nebezpečné. Prohlížeč má určitou volnost, pokud jde o to, kdy k tomu dojde, ale obecně se tato chyba zobrazí, pokud je načtení souboru do prohlížeče nebezpečné nebo prohlížeč prováděl příliš mnoho čtení.
• NotReadableError – soubor existuje, ale nelze jej přečíst, pravděpodobně kvůli problému s oprávněními.
• EncodingError – především při pokusu o čtení jako datový URI a délka výsledného datového URI přesahuje maximální délku podporovanou prohlížečem.

Pokud během čtení souboru dojde k chybě, zobrazí se FileReader error objektu vlastnost je přiřazena jako instance jedné z výše uvedených chyb. Alespoň tak je napsána specifikace. Ve skutečnosti to prohlížeče implementují jako FileError objekt, který má code vlastnost označující typ chyby, ke které došlo. Každý typ chyby je reprezentován číselnou konstantní hodnotou:

• FileError.NOT_FOUND_ERR pro chyby soubor nenalezen.
• FileError.SECURITY_ERR kvůli bezpečnostním chybám.
• FileError.NOT_READABLE_ERR za nečitelné chyby.
• FileError.ENCODING_ERR pro chyby kódování.
• FileError.ABORT_ERR když abort() je voláno, když neprobíhá žádné čtení.

Typ chyby můžete otestovat buď během error události nebo během loadend :

var reader = new FileReader();

reader.onloadend = function(event) {
    var contents = event.target.result,
        error    = event.target.error;
 
    if (error != null) {
        switch (error.code) {
            case error.ENCODING_ERR:
                console.error("Encoding error!");
                break;

            case error.NOT_FOUND_ERR:
                console.error("File not found!");
                break;

            case error.NOT_READABLE_ERR:
                console.error("File could not be read!");
                break;

            case error.SECURITY_ERR:
                console.error("Security issue with file!");
                break;

            default:
                console.error("I have no idea what's wrong!");
        }
    } else {
        progressNode.max = 1;
        progressNode.value = 1;
        console.log("Contents: " + contents);
    }
};

reader.readAsText(file);

Další

FileReader objekt je plně vybavený objekt se spoustou funkcí a mnoha podobností s XMLHttpRequest . Podle těchto tří posledních příspěvků byste nyní měli být schopni číst data ze souborů pomocí JavaScriptu a v případě potřeby je odesílat zpět na server. Nicméně File API ekosystém je o něco větší, než bylo v této sérii diskutováno, a v další části se dozvíte o nových výkonných funkcích navržených pro práci se soubory.

Odkazy

1. Události průběhu
2. File API