Upload Multiple tipo Gmail

Muchas personas hemos visto la forma de ingresar los archivos para hacer upload en Gmail, si seleccionas un archivo se creará un enlace que te permitirá un nuevo archivo, esto es muy práctico si se quiere hacer uploads de archivos multiple.

Veamos el script para realizar esta acción. Lo primero es crear el formulario con un campo de tipo file llamado attach y un Div oculto para el enlace a Agregar otro Archivo.

  1. <input type="file" name="attach" id="attach"
  2. onchange="setBlock();" />
  3. <div id="moreUploads"></div>
  4. <div id="moreLink" style="display:none;">
  5. <a href="javascript:addFileInput();">Agregar otro Archivo</a>
  6. </div>

El siguiente paso es crear las funciones javascript, la primera addFileInput crear el nuevo campo tipo file para seleccionar el siguiente archivo y setBlock para mostrar el enlace.

  1. var upload_number = 2;
  2. function addFileInput() {
  3.     var d = document.createElement("div");
  4.     var file = document.createElement("input");
  5.     file.setAttribute("type", "file");
  6.     file.setAttribute("name", "attach"+upload_number);
  7.     d.appendChild(file);
  8.     document.getElementById("moreUploads").appendChild(d);
  9.     upload_number++;
  10. }
  11. function setBlock() {
  12.    document.getElementById('moreLink').style.display = 'block';
  13. }

Puedes ver el [TBOX] resultado de este ejemplo, http://samples.unijimpe.net/attach.html, Gmail Upload, 400, 200[/TBOX]. Espero les sirva de algo, desde luego la parte de servidor pueden hacerla dependiendo del lenguaje que manejen.

Comentarios Total 27 comentarios


coke
Publicado: 15/03/2007 10:30 am

Como puedo guardar la direccion de esos archivos que se suben en una base de datos??

muchas gracias

saludos

unijimpe
Publicado: 16/03/2007 12:11 am

Bueno, en cada vez que subes un archivo tendrías que hacer un insert en tu base de datos donde guardes la ruta donde esta el archivo. La forma exacta depende de la base de datos que elijas.

Alexander Rueda
Publicado: 06/04/2007 5:21 pm

Bueno, me podrian por favro explicar como quedaria el upload de archivos multiples con PHP.
Gracias

renzo_xp
Publicado: 24/06/2007 1:39 am

Gracias por el dato.
Solo un detalle sin mucha importancia:
Al crear el nuevo INPUT no tenía lo mismo del original, le faltaba el evento “onChange” y que se oculte el enlace “Agrega otro archivo”.

Agregando 2 lineas al final de la función “addFileInput” se soluciona esto:

file.onchange = setBlock;
document.getElementById(‘moreLink’).style.display = ‘none’;

Saludos

unijimpe
Publicado: 24/06/2007 5:15 am

Hola, tienes mucha razón de esta forma queda mucho mejor, gracias por tu aporte.
Saludos

Marc
Publicado: 01/08/2007 10:29 pm

Hola Unijimpe,

Ya he creado el Upload De Imagenes en PHP.
Me podria pasar el código fuente de el Upload Masivo de Imagenes en PHP.
Se lo agradeceria mucho :)

marta_yo
Publicado: 22/08/2007 4:52 am

Genial!! esta muy bien pensado tu recurso, y con lo que dice renzo_xp queda de perlas

GRACIASSS!!!

Julian
Publicado: 04/09/2007 11:35 pm

muchas gracias!!, me fue muy util.

LEAD
Publicado: 03/10/2007 11:50 am

buen manejo del dom, y si quiero enviar con ajax el elemento FILE ?

LEAD
Publicado: 03/10/2007 11:46 pm

Como envio parametros en la funcion setBlock
file.onchange = setBlock;

no me permite enviar de manera tradicional como un javascript. por ejemplo
file.onchange = setBlock(parm1,parm2);

Gracias por sus respuestas

Cristóbal
Publicado: 23/10/2007 2:26 am

Muy buenos los códigos. Realmente muy útil.

Muchas gracias!!!

5n4K3
Publicado: 03/11/2007 1:40 am

Muy buen codigo! me ayudo mucho :D….una pequeña modificación para trabajar mas comodo :P

cambiar en la funcion addFileInput()

file.setAttribute(“name”, “attach”+upload_number);
por
file.setAttribute(“name”, “attach[]”);

Y cambiar tambien en el input el name a “attach[]”…asi van a recibir un array desde php ;) saludos!

cabelo
Publicado: 08/11/2007 8:28 am

Super bien esto, pero… y si quieres quitar un file??

Espero una respuesta, gracias!

yelitza meneses
Publicado: 14/11/2007 5:37 pm

me mandaron a construir un block gmail como lo puedo hacer

mario
Publicado: 11/01/2008 7:12 pm

http://www.buayacorp.com/archivos/enviar-o-subir-multiples-archivos-adjuntos-al-estilo-gmail/
esto les servira es justo lo que quieren.

Ruben
Publicado: 27/02/2008 2:25 pm

Y… como podríamos hacer que existiese un límite para subir archivos? Por ejemplo, que el usuario no pueda meter más de 10 archivos.

Al aparecer el input número 10, que ya deje de salir el “Agregar otro Archivo”.

Gracias de antemano

Marcos Reyes Muñoz
Publicado: 08/07/2008 7:44 am

Quisiera insistir en o de cargar una base de datos con imagenes.

Como podemos primero guardar la ruta de la imagen con el nombre, y segundo que se haga despues de que la ventana se cierre, o sea quiede guardado en un post o algo.

Saludos.

Salvador
Publicado: 18/07/2008 12:46 pm

muy buen aporte. gracias por todo

Alejandro Arco
Publicado: 30/07/2008 11:46 am

Buscando en Google información referente a los input multiples he accedido a este blog y me he encontrado con esta idea bastante buena jeje

En un próximo proyecto la aplicaré.

Un saludo,
Alejandro Arco

Marcelo
Publicado: 18/05/2010 9:21 am

Hola! Buenísimo los tutoriales que has publicado. Estoy usando este mismo y funciona de maravillas pero tengo una consulta para hacerte sobre este mismo…
¿hay alguna manera de agregar un link o botón al lado de AGREGAR OTRO ARCHIVO que diga QUITAR para sacarlo en el caso que se quiera eliminar un archivo antes de subirlo?

Muchas gracias y saludos.
MArcelo.

Ramonfer
Publicado: 14/07/2010 1:57 pm

Muy buenos los tutoriales.
Un ejemplo de otro sitio web para subir archivos de todo tipo a multiples Hosts es http://www.multisiteupload.com .
Puedes subir música, videos, fotos, imágenes, documentos, pdf, Zip … a 12 Hots con un solo clic en unos segundos.
Lo recomiendo ya que lo uso con frecuencia y funciona muy bien.

mile
Publicado: 15/09/2010 5:55 pm

implemente ese codigo,pero me surge una duda al trabajarlo con php como podria obtener los datos de ese array.

mile
Publicado: 15/09/2010 6:02 pm

implementandolo con php no me funciona, como conoceria el tamaño del vector o al menos como haria pa saber si si me esta llevando la cantidad de imagenes seleccionadas

unijimpe
Publicado: 15/09/2010 6:16 pm

Para ver los archivos que se está enviando en el formulario puedes hacerlo mediante:

print_r($_FILES);

Donde puedes ver que los archivos se envían en un array, entonces podrías recoger los datos de la siguiente manera:

$files = $_FILES;
for ($i=0; $i

mile
Publicado: 23/09/2010 1:56 pm

Hola tengo un inconveniente, necesito que despues de crear una carpeta con mkdir me subo en esa misma las imagenes que elijo con la funcion que dieron arriba,pero el problema es q no me lleva las imagenes y al imprimir el array me sale en 0 como si no trajera nada, si me pudieran ayudar seria muy util.
gracias…..

Sergiy
Publicado: 13/04/2011 1:59 pm

Muchísimas gracias. Me ha sido de grand ayuda porque me estaba volviendo loco antes de encontrar esta solución.

olaf
Publicado: 24/06/2011 7:46 pm

Muy pobre tu contenido… sabes… dejate de joder yhas las cosas como antes ;)
ya no me gusta este sitio

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)