JavaScript: leggere un file

Con l'introduzione delle API per i file in JavaScript si aprono scenari impensabili fino a qualche anno fa.

Data la seguente marcatura:

<input type="file" name="csv" id="csv" />

e presupponendo un file CSV così strutturato:

A,B,C
1,2,3
4,5,6
...

possiamo scrivere il seguente codice JavaScript:

(function() {
	var Importer = function( element ) {
		// element è il nostro input
		this.el = document.querySelector( element );
		this.init();
	};
	
	Importer.prototype = {
		init: function() {
			this.change();
		},
		change: function() {
			var self = this;
			
			function readFile( file ) {                                                       
    			var reader = new FileReader(); // Istanza di FileReader
    			reader.onload = readSuccess;  // Leggiamo il file quando è stato caricato
    			                                          
    			function readSuccess( evt ) {
	    			// result racchiude i contenuti del file                         
        			var csv = self._parseCSV( evt.target.result );
        			self._insertData( csv );                                
    			}
    			
    			reader.readAsText( file ); // Leggiamo il file come testo                                              
			} 

			this.el.addEventListener( "change", function( e ) {
				
				 var files = e.target.files; // Array dei file legati al campo
				 var file = files[0]; // File selezionato
				 
				 if( !files.length ) { // Nessun file?
				 	alert( "Seleziona un file" );
				 	return;
				 }
				 if( !/csv/.test( file.type ) ) { // Solo file .csv
				 	alert( "Solo file CSV" );
				 	return;
				 }
				 
				 readFile( file ); // Leggiamo il file

			}, false);
		},
		_parseCSV: function( str ) {
			var lines = str.split( /\n/ ); // Otteniamo un array di righe
			var data = lines.slice( 1, lines.length ); // Eliminiamo le intestazioni CSV
			var items = [];

			for( var i = 0; i < data.length; ++i ) {
				var line = data[i];
				var parts = line.split( "," ); // Otteniamo un array di valori
				var a = parts[0];
				var b = parts[1];
				var c = parts[2];

				var item = {
					a: a,
					b: b,
					c: c
				};
				
				// Creiamo un array di oggetti

				items.push( item );
			}

			return items;
		},
		_insertData: function( items ) {
			// Inserisce i dati
		}
	};

	document.addEventListener( "DOMContentLoaded", function() {
		var importerInstance = new Importer( "#csv" );
	});
	
})();