3

Tengo el siguiente código:

 <input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // 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>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Consigo los datos del archivo leído. Como leo el contenido y se lo asigno a una variable ?

No consigo entender la API FileReader

1
  • ¿Cuál es el objetivo de usar FileReader en este caso? El siguente enlace muestra un ejemplo usando FileReader para obtener el tipo MIME de una imagen. Commented el 25 feb. 2016 a las 21:15

2 respuestas 2

3

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>

1
  • Entendido. Gracias a todos
    – kamome
    Commented el 25 feb. 2016 a las 22:01
1

Este ejemplo pones solo extraer la información del archivo, es decir, la metadata. De hecho no utilizas FileReader solo File.

Te recomiendo leer el API oficial del w3

Y puedes revisar la funcionalidad en este jsfiddle (Yo no lo he creado), en la prueba puedes subir un archivo de texto y ver el contenido en el navegador, que es lo que quieres.

El truco principal es preguntar si esta soportado el API y de ahí ejecutar el proceso Asíncrono.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.