Contenido

Multiupload con estilo

16 dic

+ 10

La posibilidad de subir más de un fichero desde nuestro servidor es algo que los navegadores ya deberían empezar a implementar, hacer que el elemento <input type="file" /> se encargue por el mismo de permitir el multiupload.

Pero mientras tanto debemos usar herramientas externas para realizar esta tarea. Con wwiconifield podemos paliar esta carencia, y de paso, podemos darle un aspecto realmente elegante y distinguido a nuestra aplicación.

multiupload.png

Instalación

Al ser una aplicación en javascript debemos cargar los ficheros necesarios en nuestro <head /> para así poder disponer de la funcionalidad extra deseada. Además incluiremos las CSS que darán estilo a nuestro gestor de subidas.

<script type="text/javascript" src="wwiconified.js"></script>
<link rel="stylesheet" href="wwiconified.css" media="screen" />
    

Una vez añadida esta funcionalidad, nos quedará el formulario encargado de subir los ficheros al servidor.

<form action="somefile.php" method="post" enctype="multipart/form-data">
   <input class="wwIconified" type="file" name="d[]" />
   <input type="submit" value="Upload" />
</form>

La magia de este formulario reside en el nombre (name) de nuestro elemento <input type="file" />, el usar d[] nos permite obtener los datos en muestra página receptora con el mismo nombre. Así no dependeremos de la cantidad de ficheros subidos a la hora de recibir los ficheros.

<?php
$files = $_FILES[d];

foreach ($files as $file) {
	hacemos_algo($file);
}
?>

Ver una demo.

  • Oops. lo he probado, y al pulsar Upload, me dice descaradamente:

    “No input file specified.”

    Qué osadía!

  • suena interesante, pero la demo no funciona para apreciar su funcionalidad.

  • El script es “curioso”… pena que no funcione en Firefox.

    Existe otra alternativa… es usando flash… pero que nadie me pregunte como hacerlo… yo solo lo vi funcionando en slideshare.net y la primera vez me sorprendió, ver como el navegador (IE y Firefox) solo mostraban los fichero PPT de una carpeta, y además permitia seleccionar varios a la vez.

    Si alguien encuentra algo “estándar” que avise ;)

  • como puedo hacer q estos archivos se inserten en una tabla SQL

  • Pues yo también he encontrado un problema. Necesito tratar el archivo de imagen (los) para generar thumbs, etc..
    Como el array $_FILES[d] consta de un array para cada característica, usando por ejemplo $_FILES[d][‘tmp_name’][0] pues como no es un archivo no va..

    Por otro lado, estoy observando que los comentarios de este site parece que no se responden… Por poner un ejemplo..en este mismo post, los usuarios comentamos y parece k hablemos solos..

  • @Maria: Buenas, has probado a ver la salida por pantalla de la variable $_FILES?
    Puedes hacerlo con este código:

    
    echo "<pre>";
    print_r($_FILES);
    echo "</pre>";
    

    De esta forma obtendrás los ficheros que han sido enviados, y así perfilar tu script.

    Saludos

  • Existe alguna forma de restringir el tipo de archivo a subir?

  • Me sale lo siguiente

    ————————————————
    Fatal error: Call to undefined function hacemos_algo() in f:\appserv\www\ejemplos\upload\up.php on line 20
    ————————-

    17. loas lineas son
    18. $files = $_FILES[d];
    19.
    20. foreach($files as $file) {
    21. hacemos_algo($file);
    22. }

  • Cristian: “hacemos_algo” es una funcion que no existe y debes crearla.

    Cesar: Si se puede restringir cogiendo el valor “size” del arreglo

    Aqui dejo un ejemplo de upload usando este script, funciona en IE, aun no lo pruebo en mozilla:

    http://webdesign-webdevelopments.com/multiple_upload.rar

    Seguro se puede optimizar mas pero se los dejo como ejemplo.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.