Čtení souborů javascriptem pomocí FILE API

Tento článek je volným překladem z anglického „Reading files in JavaSCript using the file API“ od Erica Bidelmana na webu HTML5ROCK.COM

Úvod

Specifikace nabízí několik rozhraní pro přístup k souborům z „lokálního“ systému:

1. File – jednotlivý soubor, poskytuje informace pro čtení, jako je jméno, velikost souboru, mimetype a odkaz na popisovače souboru.
2. FileList – pole, složené s jednotlivých souborů File. (Pokud použijeme <input type=„file“ multiple> nebo přetáhneme soubory z adresáře na pracovní ploše (drag and drop)).
3. Blob – Umožňuje řezání souboru po určitém počtu bajtů.

Pro použití v kombinaci s výše uvedenými datovými strukturami, lze použít rozhraní pro asynchronní čtení souboru: FileReader prostřednictvím Javascriptu, Díky tomu je možné sledovat průběh čtení souboru, případné chyby, nebo určit, kdy je načítání kompletní. V mnoha ohledech se podobá specifikaci XMLHttpRequest API.

Výběr souborů

První věc, kterou musíme udělat, je zkontrolovat, zda náš prohlížeč plně podporuje FILE API:

// Podmínka pro kontrolu podpory FILE API.
if (window.File && window.FileReader && window.FileList && window.Blob){
   // Výborně, náš FILE API je plně podporován.
}
else{
   alert('FILE API není v tomto prohlížeči plně podporován.');
}

Pokud bude naše aplikace používat pouze některé z uvedených struktur. Upravíme podmínku jen na použité struktury.

Použití formulářového prvku pro výběr souborů.

Nejjednodušší způsob jak vybrat soubor, je použít standardní <input type=„file“> prvek. JavaScript vrátí seznam vybraných souborů – objektů, jako seznam souborů uložený ve FileList. Zde je příklad, kde je použit atribut multiple pro výběr více souborů najednou:

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList objekt
    // proměnná files je FileList-em souborů.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Příklad: Zde můžete vyzkoušet input pro vybrání souborů.

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

• ‚, escape(f.name), ' (‘, f.type || ‚n/a‘, ‚) – ', f.size, ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a‘, ''); } document.getElementById(‚lis­t2‘).innerHTML = '
  • FileReader.readAsBinaryString (Blob | File) – Data souboru/části souboru, jako binární řetězec. Každý bajt bude reprezentován celým číslem v rozsahu [0 .. 255].
  • FileReader.readAsText (Blob | File, opt_encoding) – Data souboru/části souboru, jako textový řetězec. Ve výchozím nastavení je řetězec dekódován jako „UTF-8“. Lze zadat i jiné kódování (opt_encoding).
  • FileReader.readAsDataURL (Blob | File) – Data souboru/části souboru, jako data URL.
  • FileReader.readAsArrayBuffer (Blob | File) – Data souboru/části souboru, jako ArrayBuffer objektu.
  • onloadstart – Událost při začátku nahrávání.
  • onprogress – Událost při načítání – průběh, proces, nahrávání.
  • onload – Událost při nahrávání.
  • onabort – Událost při zrušení nahrávání,
  • onerror – Událost pokud se vyskytne chyba při nahrávání.
  • onloadend – Událost při dokončení nahrávání.