L'oggetto FileReader

Come abbiamo già accennato, per accedere al contenuto di un file dobbiamo fare ricorso all'oggetto FileReader. Tramite una serie di metodi asincroni possiamo gestire il contenuto di un file in maniera abbastanza immediata.

readAsText

Ad esempio, se vogliamo visualizzare il contenuto di un file di testo possiamo procedere come nel seguente esempio:

var reader = new FileReader();
reader.onload = function(event) {
	var testo = event.target.result;
	document.getElementById("contenuto").innerHTML = testo;
};
reader.readAsText(file);

Abbiamo creato un'istanza dell'oggetto FileReader, quindi abbiamo assegnato un gestore all'evento load dell'oggetto ed abbiamo invocato il metodo readAsText() passandogli l'oggetto file da leggere. Al termine del caricamento del file viene generato l'evento load, in corrispondenza del quale accediamo al contenuto del file tramite la proprietà result di target messo a disposizione dall'oggetto event. Questo contenuto lo visualizziamo quindi all'interno di un elemento della pagina.

Il metodo readAsText(), quindi, ci consente di accedere al contenuto di un file interpretandolo come testo.

readAsDataURL

Per gestire file di tipo binario come ad esempio le immagini non possiamo naturalmente utilizzare il metodo readAsText(). Un possibile approccio consiste nel generare un data URL a partire dal file tramite il metodo readAsDataURL(), come nel seguente esempio:

var reader = new FileReader();
reader.onload = function(event) {
	var dataURL = event.target.result;
	document.getElementById("immagine").src = dataURL;
};
reader.readAsDataURL(file);

In questo caso, il contenuto del file viene interpretato come data URL, cioè una rappresentazione in base64 del contenuto del file come quello mostrato di seguito:

data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7

Possiamo quindi assegnare il data URL direttamente alla proprietà src di un elemento <img>.

Ecco l'immagine corrispondente:

readAsArrayBuffer

Un approccio più generale che ci consente di accedere al contenuto di qualsiasi tipo di file è fornito da readAsArrayBuffer(). Questo metodo ci fornisce la rappresentazione binaria del contenuto del file, ma naturalmente la sua gestione è un po' più complessa e richiede la conoscenza della struttura del file. Il seguente esempio mostra come riconoscere il formato di un file di immagine sfruttando il cosiddetto magic number, il numero rappresentato dai primi quattro byte:

var reader = new FileReader();
reader.onload = function(event) {
	var buffer = event.target.result;
	var int32View = new Int32Array(buffer);
	switch(int32View[0]) {
		case 1196314761:
			tipoImmagine = "png";
			break;
		case 944130375:
			tipoImmagine = "gif";
			break;
		case 544099650:
			tipoImmagine = "bmp";
			break;
		case -520103681:
			tipoImmagine = "jpg";
			break;
		default:
			tipoImmagine= "sconosciuto";
			break;
	}
	console.log(tipoImmagine);
};
reader.readAsArrayBuffer(file);

La possibilità di accedere a basso livello al contenuto di un file offre enormi opportunità di eseguire elaborazioni prima impensabili con JavaScript. Ad esempio, è possibile comprimere un file prima di inviarlo al server o modificarlo prima di visualizzare il suo contenuto ed altre attività analoghe.