DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
21-01-2016

Resulta indispensable para las aplicaciones web que manejen un alto volúmenes de archivos al momento de su carga por parte del usuario; poder validar o verificar los datos del archivo que lo conforman el archivo; antes teníamos que cargar el archivo para que desde el lado del servidor realizar estas validaciones; ahora también es posible realizar parte de estas validaciones desde el lado del cliente con la API de archivos en JavaScript.

Hasta la fecha se han hablado de algunas APIs JavaScript que permiten realizar múltiples funciones y que sin ellas sería muy dificiles de hacer; ahora veremos cómo trabajar con parte de la API de archivos en JavaScript; veremos como se puede obtener datos de archivos que se encuentren cargados localmente a través del input type="file" y derivados.

Propiedades de la API de archivos en JavaScript

Una vez que el usuario realice la carga correspondiente de los archivos, podemos emplear la API de archivos en JavaScript para consultar datos de los archivos cargados; datos como extensión, MIME, tamaño del archivo y de esta forma validar fácilmente que tenga el formato que se especifique:

En resumen, la API de archivos en JavaScript permite realizar multitud de operaciones con cualquier archivo que podamos cargar imágenes, archivos en texto plano, doc, etc.

Verificando la compatibilidad con el navegador

Al ser una tecnología provista a partir de la API de HTML5 puede sufrir cambios de una versión a otra de los navegadores; por lo tanto, es necesario validar que el navegador realmente cuente con el soporte correspondiente a esta API.

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

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

Se referencia el objeto Filelist aunque este no se emplee directamente por este nombre, permite retornar una lista de los archivos seleccionados (por ejemplo) en un input type="file".

Obteniendo información de la constitución de los archivos

Garantizado el soporte por el navegador, ahora podemos estar seguro que el navegador cuenta con soporte a las propiedades listadas anteriormente.

Obteniendo acceso a los archivos de usuario

El método más común para cargar los archivos en un aplicación es mediante el uso de la etiqueta input type="file"; una vez cargador con ayuda de la API de archivos podemos obtener un lista de archivos cargados por el usuario su información.

La API de archivos soporta al 100% el atributo multiples presentes en la etiqueta input type="file".

Mostrando los datos de archivos cargados en un input type="file" multiple

El siguiente ejemplo permite mostrar la distinta información obtenible mediante la API de archivos seleccionados por un input type="file" multiple:

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

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

var output = [];
for (var i = 0, f; f = files[i]; i++) {
    output.push('<li>', escape(f.name), '(', f.type || 'n/a', ') - ',
            f.size, ' bytes, last modified: ',
            f.lastModifiedDate.toLocaleDateString(), '</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

Mostrando los datos de archivos cargador mediante Drag and Drop

El siguiente ejemplo es una variación del anterior, y podemos emplear el Drag and Drop para la carga del archivo y posteriormente mostrar la información del archivo:


    function drop(event) {
        event.stopPropagation();
        event.preventDefault();

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

        var files = event.dataTransfer.files;

        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
            output.push('<li>', escape(f.name), '(', f.type || 'n/a', ') - ',
                    f.size, ' bytes, última modificación: ',
                    f.lastModifiedDate.toLocaleDateString(), '</li>');
        }
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
    }
    function dragenter(event) {

        event.stopPropagation();
        event.preventDefault();
    }

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

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

    contenedor.addEventListener("dragenter", dragenter, false);
    contenedor.addEventListener("dragover", dragover, false);
    contenedor.addEventListener("drop", drop, false);

Conclusiones

Y esto es todo por ahora, continuaremos hablando de la API de archivos más adelante ejemplificando su uso al momento que no solo podemos listar información del archivo, si no también abrirlos para la lectura de los mismo.

Enlaces de interés


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Árbol arcoíris creciente

Árbol arcoíris creciente

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Esfera de agrupación

Esfera de agrupación

Algunos artículos que te pueden interesar

Usando la API de Visibilidad de Página  en JavaScript

Usando la API de Visibilidad de Página en JavaScript

La API de Visibilidad de Página permite saber cuando una página web está siendo visualizada por el usuario y por ende podemos realizar las configuraciones para evitar el uso de recursos innecesarios.

Andrés Cruz 09-03-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

Primeros pasos con SQLite en JavaScript: los métodos openDatabase, executeSql y executeSql

Primeros pasos con SQLite en JavaScript: los métodos openDatabase, executeSql y executeSql

Con SQLite en HTML5 se puede almacenar información persistente de distintos tipos (del usuario, control, etc) con JavaScript empleando los métodos openDatabase, executeSql y executeSql.

Andrés Cruz 18-01-2016