Lo que te falta es muy sencillo: definir lectores para los ficheros, y asignar la acción que se ejecutará cuando se cargue:
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var lectores = new Array(); // los lectores
// files is a FileList of File objects. List some properties.
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.toLocaleDateString(), '</li>');
// creas un lector para cada fichero o podría haber problemas
lectores[i] = new FileReader();
// define qué quieres que ocurra cuando se cargue el contenido
lectores[i].onload = function(e) {
var contenido = this.result;
console.log(contenido); // mostrar por la consola
}
// leer cada fichero como texto (esto se ejecuta de manera asíncrona)
lectores[i].readAsText(f);
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
Es importante tener en cuenta que la carga se hace de forma asíncrona (el código continuará su ejecución normal y el onload
no se ejecutará hasta que el fichero se cargue).
También es importante utilizar un lector diferente para cada fichero. Si utilizas el mismo, podría haber un conflicto y fallaría el script (o el resultado podría no ser el esperado).
Aquí dejo una demo con el código (mira la consola para ver el contenido de los ficheros, si eliges un fichero muy pesado puede tardar en mostrarse el contenido):
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var lectores = new Array();
// files is a FileList of File objects. List some properties.
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.toLocaleDateString(), '</li>');
lectores[i] = new FileReader();
lectores[i].onload = function(e) {
var contenido = this.result;
console.log(contenido);
}
lectores[i].readAsText(f);
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>