DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
09-02-2016

Poder acceder al contenido de los archivos cargados en una página web, o lo que es lo mismo, permitir la lectura de los archivos cargados en la aplicación web mediante una API JavaScript nativa abre una enorme cantidad de posibilidades para la creación de aplicaciones web para el manejo de archivos y edición de los mismo.

Se puede cargar archivos texto planos para la edición del texto que lo conforma, validar el contenido, mostrar previews, etc y todo esto desde el lado del cliente sin necesidad de conectarse a otro servidor.

Anteriormente explicamos las distintas propiedades que existen en la API de archivos en JavaScript para obtener datos de los archivos; ahora iremos un poco más allá para llegar a su apertura para una posterior lectura de los archivos cargados mediante input type="file" u otros métodos como el Drag and Drop.

1.0 Verificando la compatibilidad con el navegador

Antes que nada y al igual que cualquier nueva tecnología se recomienda verificar que el navegador cuente con soporte emplear la API; se debe de hacer referencia a la interfaz File en vez de la interfaz FileList la cual proporciona datos del archivo de solo lectura como su nombre y más importante del contenido del mismo.

Para verificar la compatibilidad podemos emplear el siguiente código JavaScript:

if (!(window.File)) {
    console.log('La API File no está soportada');
    return;
}

Garantizado el soporte de la API de archivos (window.File) por el navegador, ahora si es posible emplear los distintos métodos y propiedades que cuenta la API de archivos para la lectura del mismo.

2.0 Obteniendo archivos del usuario

El método más común para obtener archivos por parte del usuario es mediante la etiqueta input type="file"; aunque sirve cualquier API que retorne el listado de los archivos y el contenido de estos serán accedidos con la API de archivos como el experimento de Drag and Drop que vimos anteriormente.

Es posible obtener múltiple información sobre la lista de archivos que actualmente fueran cargados (soporta el atributo multiples).

3.0 la interfaz FileReader para la lectura de los archivos

Esta interfaz nos provee de métodos para la lectura de los archivos como:

Todos estos métodos tienen en común el pase del archivo como parámetros para poder acceder a su contenido, una vez que se acceda a su contenido y fuera leído el contenido se dispara el evento loadend.

Aunque para los ejemplos presentados (los cuales se asumen serán de texto plano) nos serviría emplear cualquiera de los métodos vistos anteriormente aunque algunos retornen el MIME entre otras cosas.

Si quieres obtener más información, no dudes en consultar a la MDN: FileReader.

3.1 Eventos de la interfaz FileReader

El evento loadend se dispara luego de que la lectura del archivo es exitosa y desde aquí se accede al contenido del archivo y hacer algo con el mismo.

Lectura de archivos capturados mediante un input type="file"

El uso más básico o común que se nos ocurre es capturar el archivo seleccionado por un input type="file" y mostrar el contenido de este:

            var MAX_BYTES = 102400; // 100 KB

            function filesInfo(event) {

                if (!(window.File)) {
                    console.log('La API File no está soportada');
                    return;
                }

                var file;
                var reader;
                var files = document.getElementById('files').files;

                for (var i = 0; i 

Vemos que la estructura es similar a los vistos en la entrada anterior: a excepción que ahora empleamos el método FileReader para la lectura de los archivos y la posterior llamada del evento onloadend al finalizar la lectura; finalmente el experimento:

Lectura de archivos capturados mediante el Drag and Drop

El último ejemplo consiste en adaptar el experimento visto anteriormente con el Drag and Drop empleando todos los eventos del Drag and Drop hasta la captura del archivo en el evento drop():

     var MAX_BYTES = 102400; // 100 KB

                function dragenter(event) {
                    event.stopPropagation();
                    event.preventDefault();
                }

                function dragover(event) {
                    event.stopPropagation();
                    event.preventDefault();
                }

                function drop(event) {

                    console.log('drop', event);
                    event.stopPropagation();
                    event.preventDefault();

                    var data = event.dataTransfer;
                    var files = data.files;
                    var file;
                    var reader;

                    for (var i = 0; i 




Otros enlaces de interés


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Hover over the cards

Hover over the cards

Librería para gestos

Librería para gestos

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

Introducción a la API de Orientación de Pantalla en JavaScript

Introducción a la API de Orientación de Pantalla en JavaScript

La API de Orientación de Pantalla en JavaScript accesible a través del objeto Screen proporciona primitivas que permiten detectar la posición de la pantalla de un dispositivo, bloquear y desbloquear posiciones específicas.

Andrés Cruz 19-03-2015

¿Cómo crear un efecto de onda con Canvas y JavaScript?

¿Cómo crear un efecto de onda con Canvas y JavaScript?

En esta entrada veremos un experimento que simula una oda empleando el elemento Canvas y JavaScript.

Andrés Cruz 02-11-2015

Los web workers para ejecutar JavaScript en paralelo

Los web workers para ejecutar JavaScript en paralelo

Los web workers permiten ejecutar secciones de código de archivos JavaScript en paralelo en un hilo aparte; en esta entrada veremos cómo trabajar con los web workers.

Andrés Cruz 01-10-2015