logo

Werken met bestanden in JavaScript, deel 3:voortgangsgebeurtenissen en fouten

De FileReader object wordt gebruikt om gegevens uit bestanden te lezen die via de browser toegankelijk worden gemaakt. In mijn vorige bericht heb je geleerd hoe je een FileReader . gebruikt object om gemakkelijk gegevens uit een bestand in verschillende formaten te lezen. De FileReader lijkt erg op XMLHttpRequest op veel manieren.

Voortgangsgebeurtenissen

Voortgangsgebeurtenissen worden zo gewoon dat ze eigenlijk in een aparte specificatie worden opgeschreven 1 . Deze gebeurtenissen zijn bedoeld om in het algemeen de voortgang van gegevensoverdrachten aan te geven. Dergelijke overdrachten vinden plaats bij het opvragen van gegevens van de server, maar ook bij het opvragen van gegevens van schijf, en dat is wat FileReader doet.

Er zijn zes voortgangsgebeurtenissen:

  • loadstart – geeft aan dat het proces van het laden van gegevens is begonnen. Dit evenement wordt altijd als eerste geactiveerd.
  • progress – gaat meerdere keren af ​​terwijl gegevens worden geladen, waardoor toegang wordt verkregen tot tussentijdse gegevens.
  • error – gaat af wanneer het laden is mislukt.
  • abort – gaat af wanneer het laden van gegevens is geannuleerd door abort() te bellen (beschikbaar op beide XMLHttpRequest en FileReader ).
  • load – gaat alleen af ​​als alle gegevens met succes zijn gelezen.
  • loadend - gaat af wanneer het object klaar is met het overbrengen van gegevens. Gaat altijd af en zal altijd afgaan na error , abort , of load .

Twee gebeurtenissen, error en load , werden besproken in mijn vorige post. De andere gebeurtenissen geven u meer gedetailleerde controle over gegevensoverdrachten.

Voortgang bijhouden

Als u de voortgang van een bestandslezer wilt volgen, gebruikt u de progress evenement. De event object voor deze gebeurtenis bevat drie eigenschappen om de gegevens die worden overgedragen te controleren:

  • lengthComputable – een boolean die aangeeft of de browser de volledige grootte van de gegevens kan bepalen.
  • loaded – het aantal bytes dat al is gelezen.
  • total – het totale aantal te lezen bytes.

De bedoeling van deze gegevens is om voortgangsbalken te genereren met behulp van de informatie van de progress evenement. U gebruikt bijvoorbeeld mogelijk een HTML5 <progress> element om de voortgang van het lezen van een bestand te volgen. U kunt de voortgangswaarde koppelen aan de werkelijke gegevens met behulp van de volgende code:

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

Dit is vergelijkbaar met de aanpak die Gmail gebruikt voor de implementatie van het uploaden van bestanden via slepen en neerzetten, waarbij je een voortgangsbalk ziet onmiddellijk nadat je een bestand in de e-mail hebt neergezet. Die voortgangsbalk geeft aan hoeveel van de bestanden naar de server zijn overgebracht.

Omgaan met fouten

Ook al leest u een lokaal bestand, het is nog steeds mogelijk dat het lezen mislukt. De File API-specificatie 2 definieert vier soorten fouten:

  • NotFoundError – het bestand kan niet worden gevonden.
  • SecurityError – iets over het bestand of de gelezen is gevaarlijk. De browser heeft enige speelruimte om te bepalen wanneer dit gebeurt, maar als het bestand gevaarlijk is om in de browser te laden of als de browser te veel leesbewerkingen heeft uitgevoerd, ziet u deze fout.
  • NotReadableError – het bestand bestaat maar kan niet worden gelezen, hoogstwaarschijnlijk vanwege een probleem met de rechten.
  • EncodingError – voornamelijk bij het lezen als een gegevens-URI en de lengte van de resulterende gegevens-URI is groter dan de maximale lengte die door de browser wordt ondersteund.

Als er een fout optreedt tijdens het lezen van een bestand, wordt de FileReader object's error eigenschap wordt toegewezen als een instantie van een van de bovengenoemde fouten. Tenminste, zo is de specificatie geschreven. In werkelijkheid implementeren browsers dit als een FileError object met een code eigenschap die het type fout aangeeft dat is opgetreden. Elk fouttype wordt weergegeven door een numerieke constante waarde:

  • FileError.NOT_FOUND_ERR voor bestand niet gevonden fouten.
  • FileError.SECURITY_ERR voor beveiligingsfouten.
  • FileError.NOT_READABLE_ERR voor niet leesbare fouten.
  • FileError.ENCODING_ERR voor coderingsfouten.
  • FileError.ABORT_ERR wanneer abort() wordt aangeroepen terwijl er niet wordt gelezen.

U kunt het type fout testen tijdens de error evenement of tijdens 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);

Volgende

De FileReader object is een volledig uitgerust object met veel functionaliteit en veel overeenkomsten met XMLHttpRequest . Door deze laatste drie berichten te volgen, zou je nu in staat moeten zijn om gegevens uit bestanden te lezen met JavaScript en die gegevens indien nodig terug te sturen naar de server. Echter, de File API ecosysteem is een stuk groter dan al in deze serie is besproken, en in het volgende deel leer je over krachtige nieuwe functies die zijn ontworpen om met bestanden te werken.

Referenties

  1. Voortgangsgebeurtenissen
  2. Bestands-API