Kirjoittaja: Metabolix
Kirjoitettu: 16.01.2016 – 16.01.2016
Tagit: ohjelmointitavat, koodi näytille, vinkki, web
Kun käyttäjä valitsee tiedoston HTML:n file-tyyppisellä input-elementillä, tiedoston voi lukea JavaScriptilla. Tähän tarvitaan FileReader-rajapintaa. Tiedoston voi lukea eri muodoissa käyttötarpeen mukaan: tekstinä, binääridatana tai data-URLina.
<!DOCTYPE html>
<meta charset="UTF-8" />
<title>FileReader-esimerkki</title>
<script type="text/javascript">
// Funktio yhden tiedoston käsittelyyn.
function lueTiedosto(tiedosto) {
// Luodaan lukija. (Tiedosto ja lukemismuoto valitaan lopussa.)
var lukija = new FileReader();
// onprogress kertoo, että lukeminen edistyy.
// e.loaded on luettu määrä ja e.total tiedoston koko.
lukija.onprogress = function(e) {
console.log(Math.floor(100 * e.loaded / e.total) + " % luettu tiedostosta " + tiedosto.name);
};
// onload kertoo, että lukeminen onnistui loppuun asti.
// Täällä käsitellään luettu data, lukijan result.
lukija.onload = function() {
var s = this.result;
// Näytetään tiedoston alku.
alert("Luettu: " + (s.length > 256 ? s.substr(0, 256) + "..." : s));
};
// onerror kertoo virheestä.
lukija.onerror = function() {
alert("Virhe!");
};
// onabort kertoo lukemisen keskeytyneen.
lukija.onabort = function() {
alert("Keskeytetty!");
};
// Aloitetaan lukeminen. Tässä esimerkissä luetaan tekstiä.
lukija.readAsText(tiedosto);
}
// Funktio monen tiedoston käsittelyyn;
// hyödynnetään aiempaa yhden tiedoston lukemista.
function lueTiedostot(tiedostot) {
for (var i = 0; i < tiedostot.length; ++i) {
lueTiedosto(tiedostot[i]);
}
}
</script>
<h1>FileReader-esimerkki</h1>
<p>Sivu lukee tiedoston tekstinä ja näyttää tuloksen alertilla.</p>
<p>Eteneminen kirjataan selaimen kehitystyökalujen konsoliin.</p>
<!-- Kenttä yhden tiedoston valitsemiseen. -->
<!-- Arvon muuttuessa luetaan tiedosto. -->
<p><input type="file" onchange="lueTiedosto(this.files[0])" /></p>
<!-- Kenttä usean tiedoston valitsemiseen. -->
<!-- Arvon muuttuessa luetaan tiedostot. -->
<p><input type="file" multiple onchange="lueTiedostot(this.files)" /></p>FileReaderin avulla onnistuu siis vaikka tiedoston katselu heksamuodossa selaimella.