comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[CSS & JS]Personalizar input file

  • 6 Respuestas
  • 5443 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Once

  • *
  • Underc0der
  • Mensajes: 391
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • El blog de Once
  • Twitter: @don_once
« en: Mayo 24, 2014, 08:04:16 pm »
Los que alguna vez jugueteamos con el diseño web, muy seguramente nos encontramos con el problema de personalizar los input file. Inteentaré mostrar la forma en que logré personalizar los input file usando sólo CSS, JS, y el DOM de una manera sencilla. Que además nos permite eliminar archivos que ya estan en la lista para ser subidos al servidor.

La idea es convertir esto:


en esto:



Código: HTML5
  1.     <head>
  2.         <link href="input.css" rel="stylesheet" />
  3.         <script src="input.js"></script>
  4.     </head>
  5.     <body>
  6.         <center>
  7.             <form action="http://127.0.0.1:5000/upload" enctype="multipart/form-data" method="POST" id="frm_upload">
  8.                 <div id="upload">
  9.                     <input id="archivos" type="file" name="file[]" multiple="multiple" onchange="seleccionados();"/>
  10.                 </div>
  11.                 <span id="filename"></span>
  12.                 <p/>
  13.                 <input type="button" name="submit" value="Subir" onclick="subir();"/>
  14.             </form>
  15.         </center>
  16.     </body>
  17. </html>
  18.  

Para eso, vamos a usar un formulario normal, estructurado así:

un div con id "upload" dentro del cual meteremos el input file; es el div que moldearemos para que tome la forma que nuestro upload tenga.
un input file configurado para seleccionar multiples archivos. Cuando se selecciona un archivo (evento onchange) llama a la función seleccionados
un span con id "filename" que es donde mostraremos los archivos seleccionados
un input button que se encargara cuando hagamos click sobre el de enviar el formulario.

El css (input.css):

Código: CSS
  1. input[type=file] {
  2.     opacity: 0;
  3.     width: 100%;
  4.     height: 100%;
  5. }
  6.  
  7. #upload {
  8.     background: url("https://cdn2.iconfinder.com/data/icons/internet/512/Upload-128.png") #111 center center no-repeat;
  9.     width: 150px;
  10.     border-radius: 5px;
  11.     height: 150px;
  12.     box-shadow: 0 0 5px #111;
  13. }

Este sencillo CSS simplemente hace invisible el input file (opacity: 0) y le da un ancho y alto de 100% para que ocupe la totalidad del div (upload)
en el bloque #upload, damos la apariencia que queremos que tengo nuestro upload agrgando un simple background, una sombra y unas dimensiones (150x150).

Hasta ahora, nuestro upload se ve así:

Si lo clickeamos, nos abre la ventana para seleccionar los archivos, pero una vez seleccionados, NO LOS MUESTRA. Así que ahora vamos a codear el JS:

El JS (input.js): Los navegadores no nos dejan modificar los datos de los input file, pero si que nos permite juguetear un poco con los datos. Así que lo que haremos sera obtener la lista de los elementos seleccionados y la guardaremos en un array que podremos modificar (ara eliminar los elemento que no queremos subir) y a la hora de enviar el formulario al servidor, lo que haremos es simular un formulario que llenaremos con la informacion del array y lo enviamos al servidor.

La función seleccionados:

Código: Javascript
  1. //Creamos el array que usaremos para almacenar y enviar la informacion
  2. var ELEMENTOS = new Array();
  3.  
  4. function seleccionados() {
  5.     //Obtenemos el inputfile
  6.     var input = document.getElementById("archivos");
  7.     //Obtenemos los archivos
  8.     var archivos = input.files;
  9.     //Aca es donde mostraremos los elementos seleccionados
  10.     var elementos = document.getElementById("filename");
  11.        
  12.     //Limpiamos los elementos seleccionados anteriormente
  13.     elementos.innerHTML = " ";
  14.     ELEMENTOS = [];
  15.    
  16.     //Recorremos archivo por archivo
  17.     for (item=0; item< archivos.length; item++) {
  18.         //duplicamos el archivo seleccionado en el array elementos
  19.         ELEMENTOS[item] = archivos[item];
  20.         //Creamos un div donde mostramos el archivo seleccionado
  21.         crear_div("file", elementos, archivos[item].name);
  22.     }
  23. }
  24.  

La funcion crear_div: Esta funcion se encarga de crear un div, agregarle propiedades y luego incrustarlo en un elemento padre

Código: Javascript
  1. //funcion que crea un div
  2. function crear_div(clase, padre, informacion) {
  3.     //Escapamos la variable informacion para evitar posibles XSS
  4.     informacion = escape(informacion);
  5.     //Creamos el div
  6.     var div = document.createElement("div");
  7.     //Le agregamos al div sus propiedades
  8.     div.setAttribute("class", clase);
  9.     div.setAttribute("title", "click para eliminar");
  10.    
  11.     //en caso de hacer click en un elemento, lo elimina de la lista de los archivos a subir
  12.     div.onclick = function() {
  13.         var index = -1;
  14.         //eliminamos el archivo seleccionado de la lista
  15.         for (indice=0; indice < ELEMENTOS.length; indice++) {
  16.             //Buscamos el index del elemnto seleccionado para ser eliminado
  17.             if (ELEMENTOS[indice].name == unescape(informacion)) {
  18.                 index = indice;
  19.             }
  20.         }
  21.         if (index != -1) {
  22.             //removemos el elemento de la lista
  23.             ELEMENTOS.splice(index, 1);
  24.             padre.removeChild(div);
  25.         } else {
  26.             alert("No se pudo eliminar el elemento");
  27.         }
  28.        
  29.     }
  30.    
  31.     //Agregamos el div al padre
  32.     padre.appendChild(div);
  33.     div.innerHTML = informacion;
  34. }
  35.  


Hasta ahora, nuestro upload se ve así.

Sólo nos resta darle un estilo a los div que contienen el nombre de los archivos seleccionados (que tienen la clase file):

Código: CSS
  1. .file {
  2.     background: #111;
  3.     display: inline-block;
  4.     margin: 5px;
  5.     color: #FFF;
  6.     line-height: 25px;
  7.     padding: 5px;
  8.     border-radius: 5px;
  9.     box-shadow: 0 0 5px #000;
  10. }

Y programar la función para subir los archivos al servidor:

Código: Javascript
  1. function subir() {
  2.     //creamos un nuevo formulario y lo llenamos con la información del array con los elementos a enviar
  3.     var formulario = new FormData();
  4.    
  5.     for (file=0; file < ELEMENTOS.length; file++) {
  6.         formulario.append("file[]", ELEMENTOS[file]);
  7.     }
  8.    
  9.     //obtenemos el action y method del formulario original
  10.     var frm = document.getElementById("frm_upload");
  11.     var metodo = frm.method.toUpperCase();
  12.     var action = frm.action;
  13.    
  14.     //enviamos el formulario
  15.     var request = new XMLHttpRequest;
  16.     request.open(metodo, action);
  17.     request.send(formulario);
  18. }

Y nuestro uploader está listo.

Saludos!
« Última modificación: Mayo 24, 2014, 08:05:56 pm por 11Sep »

Desconectado blackdrake

  • *
  • Co Admin
  • Mensajes: 1914
  • Actividad:
    0%
  • Reputación 15
    • Ver Perfil
« Respuesta #1 en: Mayo 24, 2014, 09:05:37 pm »
Muchisimas gracias, nunca me terminaba de gustar el estilo del uploader, ya que sabía ponerle lo básico de estilos pero nunca tan currado...

Mañana hago uno para practicar, gracias otra vez :)

Un saludo.

Enviado desde BlackMovil5




Desconectado Once

  • *
  • Underc0der
  • Mensajes: 391
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • El blog de Once
  • Twitter: @don_once
« Respuesta #2 en: Mayo 25, 2014, 12:07:18 am »
Muchisimas gracias, nunca me terminaba de gustar el estilo del uploader, ya que sabía ponerle lo básico de estilos pero nunca tan currado...

Mañana hago uno para practicar, gracias otra vez :)

Un saludo.

Enviado desde BlackMovil5

Espero te sirva el post. si tienenes alguna duda o algo, sólo comenta.

Saludos!

Desconectado fermino

  • *
  • Underc0der
  • Mensajes: 330
  • Actividad:
    0%
  • Reputación 1
  • Aprendiz de todo, maestro de nada...
    • Ver Perfil
    • In The Middle Of Knowledge
« Respuesta #3 en: Mayo 25, 2014, 08:29:33 am »
Wow! De verdad buenísimo!
Pero ¿cómo se envían los archivos al server? Digo, como los "agarro" con PHP...

Enviado desde mi ST25a mediante Tapatalk


Desconectado Once

  • *
  • Underc0der
  • Mensajes: 391
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • El blog de Once
  • Twitter: @don_once
« Respuesta #4 en: Mayo 25, 2014, 01:14:20 pm »
Wow! De verdad buenísimo!
Pero ¿cómo se envían los archivos al server? Digo, como los "agarro" con PHP...

Enviado desde mi ST25a mediante Tapatalk

No soy un tipo de PHP (programé el uploader para usarlo con flask y ajax) pero esto te debería servir:

Código: PHP
  1. <?php
  2.     if (isset($_FILES["file"])) {
  3.         $error = true;
  4.         $len = count($_FILES["file"]["name"]);
  5.  
  6.         for ($index=0; $index < $len; $index++) {
  7.                 $temporal = $_FILES["file"]["tmp_name"][$index];
  8.                 $nombre = $_FILES["file"]["name"][$index];
  9.                
  10.                 if (move_uploaded_file($temporal, "subidos/".$nombre)) {
  11.                         $error = false;
  12.                 }
  13.                
  14.         }
  15.  
  16.         if ($error) {
  17.                 echo("Ocurrio un error");
  18.         } else {
  19.                 echo("Subida con exito");
  20.         }
  21.        
  22.     }
  23. ?>

OJO: El código es bypaseable. Asíq ue cuidado dónde lo uses.

Saludos!

Desconectado fermino

  • *
  • Underc0der
  • Mensajes: 330
  • Actividad:
    0%
  • Reputación 1
  • Aprendiz de todo, maestro de nada...
    • Ver Perfil
    • In The Middle Of Knowledge
« Respuesta #5 en: Mayo 25, 2014, 01:25:08 pm »
Aaah, gracias :D Lo que quería saber es cómo quedaba el array $_FILES

Enviado desde mi ST25a mediante Tapatalk


Desconectado DragonGames

  • *
  • Underc0der
  • Mensajes: 1
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
« Respuesta #6 en: Abril 12, 2017, 05:35:50 pm »
No se como agradecerte  ;D es lo que necesitaba!
Una pregunta, sabras como hacer una pestaña flotante en el centro de la pantalla (que no sea pop-up) con javascript, donde se pueda introducir este mismo input. Es para un proyecto, una pagina donde se puedan subir wallpapers con terminacion en (.jpg, .jpeg y .png).
Un saludo! :D

 

¿Te gustó el post? COMPARTILO!



[CSS][MEDIO] Personalizar los inputs y parecidos

Iniciado por Xt3mP

Respuestas: 1
Vistas: 1359
Último mensaje Mayo 15, 2011, 04:04:06 am
por arthusu
Personalizar error 404 desde FTP

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1603
Último mensaje Febrero 24, 2010, 12:03:13 pm
por ANTRAX