Kirjautuminen

Haku

Tehtävät

Koodit: HTML, JavaScript: Tiedoston lukeminen

Kirjoittaja: Metabolix

Kirjoitettu: 16.01.2016 – 16.01.2016

Tagit: ohjelmointitavat, 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.

Kirjoita kommentti

Muista lukea kirjoitusohjeet.
Tietoa sivustosta