[HTML5] Manejando el Elemento File

HTML5 nos sigue sorprendiendo, cada vez se hace mas espectacular lo que podemos hacer con simple javascript, bueno bueno no tan simple, para el caso que nos ocupa en este post haremos uso del elemento <input type=”file”> para manejar las entradas de archivos.

En la practica resulta muy interesante lo que podemos hacer, la primero que haremos sera iniciar la definicion de nuestro html y continuaremos explicando paso a paso lo que sucede en el javascript.

El HTML

La primera fase de nuestro documento HTML quedara asi :

<html>
<head>
</head>
<body>
<input type="file" id="files" multiple>
</body>
</html>

En esta parte no hay mucho que decir, si ya tenemos un grado de experiencia, podemos simplemente ver que todo es simple ;), hasta aqui, el elemento file es el mismo de siempre, le agregamos el parametro multiple para que al abrirse el selector de archivos podamos seleccionar varios archivos.

EL Javascript

Al inciar nos llamara mucho la atencion la forma de trabajar de javascript con archivos, luego nos acostumbramos … empezaremos con esto :

file_in = document.querySelector("#files")
file_in.onchange = function(e){
    var files = e.target.files;
    for(var i=0,f;f= files[i];++i){
        console.log(f.name);
    }
}

Para que algunos no se pierdan con el document.querySelector, es la sustitucion de document.getElementById, document.querySelector utiliza los selectores mas poderosos de CSS3, lo que hacemos es obtener el contexto del elemento file en la variable file_in.

Haremos uso del evento onchange del elemento file, este evento disparara la funcion dentro y nos mostrara los nombres de los archivos seleccionados en la consola de javascript.

Es importante observar que dentro de la funcion inline del evento onchange tenemos lo siguiente :

var files = e.target.files;

Lo que se hace aqui es obtener en la variable files, el contexto de e.target.files, que son los objetos de los archivos que vienen desde el elemento file, para luego hacer un recorrido de estos elementos con el for.

Vemos que en la declaracion del for hacemos :

f = files[i]

Aqui por cada iteracion del for, la variable f, tendra el contexto (valores de objetos) de la iteraccion files[i], con f.name, indicamos que vamos a imprimir el nombre del archivo y dado que f tiene el contexto de f[i] , nos estamos cada archivo seleccionado.

Terminando la tarea

Mostrar texto en la consola de javascript quizas no es la mejor idea dado que solo se usa para pruebas, lo mejor sera ir poniendo los archivos seleccionados en una lista. En el ejemplo anterior mostrabamos solamente el nombre del archivo, en este ejemplo mostraremos mas.

f.name // muestra en nombre de archivo
f.type // el tipo de archivo
f.size // el tama~o del archivo

El ejemplo completo es :

 

<html>
<head>
</head>
<body>
<input type="file" id="files" multiple>

<div id="archivos">
<ul></ul>
</div>
<script>

var insertar_en = document.querySelector("#archivos ul");
file_in = document.querySelector("#files")
file_in.onchange = function(e){
    var files = e.target.files;
    for(var i=0,f;f= files[i];++i){
        var archivo = document.createElement("li");
        archivo.innerHTML = f.name + " - (<b>" + f.type + "</b>) ->" + f.size;
        insertar_en.appendChild(archivo);
    }
}
</script>
</body>
</html>

Ahora cada archivo seleccionado lo vamos insertando en una lista, ademas mostramos mas informacion referente al archivo.

Una muestra ya que hemos seleccionado archivos :

 

Related Posts Plugin for WordPress, Blogger...

Deja un comentario

Loading Facebook Comments ...