Seguramente alguna vez has subido un archivo a alguna pagina web, sea video, audio, imágenes, documentos, etc. Pero algo que nunca sabemos al subir el archivo, son sus datos, simplemente nos muestra la dirección de donde ha sido seleccionado y tenemos que esperar a que se termine de subir para obtener esa información, algo que quizá sea necesario mostrarle al usuario antes de subirlo para asegurar que efectivamente es lo que desea subir o simplemente lo que desea utilizar.

Como obtener información de un archivo local con JavaScript

HTML5 tiene una solución muy interesante para esto, la utilización de la API para Archivos con JavaScript, esta solución nos permite por ejemplo, presentar una miniatura de alguna imagen que desees subir al servidor antes de enviarla o verificar el MIME de los archivos compatibles y hasta su tamaño.

Información básica

File – Un archivo individual, de sólo lectura proporciona información tal como nombre, tamaño, tipo de MIME, y una referencia al identificador de archivo.
FileList – Una secuencia de matrices como el de los objetos del archivo. (Piensa en  <input type=”file” multiple> o arrastrando un directorio de archivos desde el escritorio).
Blob – Permite cortar un archivo en rangos de bytes.

Verificar que el navegador sea compatible con API de Archivos

Esto es necesario si el usuario que utilice tu servicio acceda a tu sitio web desde un navegador que no soporta estas funciones:

 

if (window.File && window.FileReader && window.FileList && window.Blob) {
   alert('Tu navegador si tiene soporte para estas funciones.');
} else {
   alert('Tu navegador no tiene soporte para estas funciones.');
}

Utilizando un formulario para cargar múltiples archivos y obtener su información

Para realizar un ejemplo sencillo y fácil de entender, utilizaremos algo ya muy conocido, un formulario con un input para cargar archivos pero con el atributo “Multiple”, así veremos el ejemplo en acción.

 

function handleFileSelect(evt) {
     var files = evt.target.files; // Objeto para Lista de Archivos, en el objeto existen los datos del archivo
     var output = [];//Creamos un arreglo para guardar todos los archivos datos en diferentes posiciones.
     for (var i = 0, f; f = files[i]; i++) {//Recorremos el objeto files para obtener los datos de cada archivo y guardarlos en el arreglo.
         output.push('<ul>
	<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ', f.size, ' bytes, ultima modificacion: ', f.lastModifiedDate.toLocaleDateString(), '</li>
</ul>');
     }
     document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';//Introducimos la lista de archivos entre las etiquetas

}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
//Ponemos un listener para escuchar cuando el evento Change del input file se ejecute, quiere decir cuando se de click en "Abrir"
  • f.name: Obtiene el nombre del archivo
  • f.type: Obtiene el MIME del archivo
  • f.size: Obtiene el tamaño del archivo en Bytes
  • f.lastModifiedDate.toLocaleDateString(): Obtiene la fecha de la ultima modificación del archivo.
Como se daran cuenta, es algo bastante sencillo de manejar, solo hay que tener algunos conocimientos previos de programación pero si nos ponemos a jugar con estas funciones comprenderemos de que se trata todo.
El link para ver el ejemplo en funcionamiento es http://html5facil.com/demos/file_api.html
Luis Antonio Gomez Prieto

Luis Antonio Gomez Prieto

Co-founder and Fullstack developer at @wavecodela

2 comentarios en “Como obtener información de un archivo local con JavaScript

  1. Una pregunta, como puedo hacer para eliminar elementos del FileList, es decir despues de seleccionar multiples archivos quiero que algunos ya no esten en el FileList, para luego subir los que realmente quiero.

    1. El tutorial solo trata de guardar los datos de cada archivo en un arreglo, cada posición tiene un objeto con la información de los archivos, entonces para poder borrar alguno, solo tendrías que ver la posición del archivo al cual quieres eliminar, y borrar el contenido de esa posición del arregló y claro eliminar el elemento “li” de la lista con la que tiene relación.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar