Trabajar con archivos con javaScript 1

Introducción al trabajo con archivos con javaScript

Jennifer Bartlett

archivado en: JavaScript / 11 enero, 2015

Hace años, el trabajo con archivos era patrimonio de los lenguajes que corren al lado del servidor, como PHP, pero con HTML5 también lo podemos hacer con javaScript gracias al api File.

El mecanismo básico es muy sencillo: asociamos a un input tipo file un evento que nos permita capturar la filelist , esto es, un objeto con los datos de los archivos que se han cargado en el input.

Por ejemplo, si tenemos esto en el html:

<input type="file" id="foo">

<div id="output"></div>

Podemos preparar algo así para empezar en el js:

window.onload = function() {

var toastNavigator = {

showMsg: function() {

var output = document.getElementById("output");

output.textContent = 'No uses la tostadora del explorer, es una basura';

}

};

var demoApiFile = {

init: function(event) {

/* Recuperamos los archivos (se pueden capturar tb con event.target.files */

var archivos = this.files;

console.log(archivos);

}

};

/* Comprobamos que el navegador soporte el api file y lanzamos la escucha */

if (window.File && window.FileReader && window.FileList && window.Blob) {

document.getElementById('foo').addEventListener('change', demoApiFile.init, false);

} else {

toastNavigator.showMsg();

}

};

La filelist tiene solo una propiedad, length, que indica el número de elementos del objeto. Nos sirve para comprobar que al menos se ha subido uno y, claro está, para recorrer el objeto. Cada elemento tiene varias propiedades. Las más importantes son:

  • lastModifiedDate: fecha de modificación del archivo.
  • name: nombre del archivo.
  • type: su tipo mime.
  • size: su tamaño.

Así, por ejemplo, si en el input añadimos la característica de que sea múltiple, es decir, que se puedan subir varios archivos, podemos añadir una función a nuestro objeto demoApiFile para que nos vaya mostrando los datos básicos de cada uno. (Ver ejemplo en plunker).

var demoApiFile = {

init: function(event) {

var archivos = this.files;

/* Cacheamos el nodo donde vamos a poner los mensajes */

var output = document.getElementById("output");

/* Preparamos la cadena */

var cadena = "";

if (archivos && archivos.length > 0) {

for (var i = 0, archivo; archivo = archivos[i]; i++) {

cadena += demoApiFile.muestraDatosBasicos(archivo);

}

output.innerHTML = cadena;

}

},

muestraDatosBasicos: function(archivo) {

var cadena = "";

/* Comprobamos que sea una imagen */

if (archivo.type.match('image.*')) {

cadena += "<p>Nombre: " + archivo.name;

cadena += "<br>Tamaño: " + archivo.size + "</p>";

return cadena;

}

}

};

Leer archivos

El asunto se pone aún más interesante cuando combinamos esta api con la api de file reader, un objeto que sirve para leer archivos y que cuenta con tres propiedades:

  • FileReader.error: indica el error que se pueda haber producido durante la lectura del archivo.
  • FileReader.readyState: un número que representa el estado de la lectura: 0:EMPTY, los datos aún no han sido leídos; 1:LOADING, se están leyendo; 2:DONE, se han leído.
  • FileReader.result: el archivo leído.

Además, tiene seis eventos asociados:

Y también tiene métodos, claro:

Entonces, la jugada normal es esta:

  1. Instanciamos el objeto reader.
  2. Indicamos que cuando termine los datos (onload) lea el archivo y haga algo.

Por ejemplo, así mostraríamos una miniatura de las imágenes que vamos a subir al server en el código que hemos visto antes. (Ver demo en plunker).

var demoApiFile = {

showThumbails: function(event) {

var archivos = this.files;

/* Cacheamos el nodo donde vamos a poner los mensajes */

var output = document.getElementById("output");

if (archivos && archivos.length > 0) {

for (var i = 0, len = archivos.length; i < len; i++) {

var archivo = archivos[i];

/* Comprobamos que sea una imagen */

if (archivo.type.match('image.*')) {

demoApiFile.drawThumbail(archivo);

}

}

}

},

drawThumbail: function(archivo) {

/* Sacamos la instancia */

var instanciaReader = new FileReader();

/* Le decimos que cuando termine de leer los datos, en cada vuelta, creamos un nodo imagen */

instanciaReader.onload = function() {

var nodoImagen = document.createElement('img');

nodoImagen.src = instanciaReader.result;

output.insertBefore(nodoImagen, null);

}

/* Le decimos que lea los datos como una url */

instanciaReader.readAsDataURL(archivo);

}

};

Y así recuperaríamos el contenido de un archivo de texto:

...

showStrings: function(event) {

var archivos = this.files;

if (archivos && archivos.length > 0) {

for (var i = 0, len = archivos.length; i < len; i++) {

var archivo = archivos[i];

/* Comprobamos que sea de texto */

if (archivo.type.match('text/plain')) {

demoApiFile.writeStrings(archivo);

}

}

}

},

writeStrings: function(archivo) {

var output = document.getElementById("outputText");

var instanciaReader = new FileReader();

instanciaReader.onload = function() {

output.textContent = instanciaReader.result;

}

instanciaReader.readAsText(archivo);

}

...

Bueno, voy a dejarlo de momento aquí. Queda para otra entrada explicar cómo leer archivos de forma fragmentada (con blobs) y poner otros ejemplos, como una barra de progreso.

|| Tags:

valoración de los lectores sobre Trabajar con archivos con javaScript 1

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 3.5 sobre 5 (8 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.