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.
<input type="file" name="attach" id="attach" onchange="setBlock();" /> <div id="moreUploads"></div> <div id="moreLink" style="display:none;"> <a href="javascript:addFileInput();">Agregar otro Archivo</a> </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.
var upload_number = 2;
function addFileInput() {
var d = document.createElement("div");
var file = document.createElement("input");
file.setAttribute("type", "file");
file.setAttribute("name", "attach"+upload_number);
d.appendChild(file);
document.getElementById("moreUploads").appendChild(d);
upload_number++;
}
function setBlock() {
document.getElementById('moreLink').style.display = 'block';
}
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
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
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.
Publicado: 06/04/2007 5:21 pm
Bueno, me podrian por favro explicar como quedaria el upload de archivos multiples con PHP.
Gracias
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
Publicado: 24/06/2007 5:15 am
Hola, tienes mucha razón de esta forma queda mucho mejor, gracias por tu aporte.
Saludos
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 :)
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!!!
Publicado: 04/09/2007 11:35 pm
muchas gracias!!, me fue muy util.
Publicado: 03/10/2007 11:50 am
buen manejo del dom, y si quiero enviar con ajax el elemento FILE ?
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
Publicado: 23/10/2007 2:26 am
Muy buenos los códigos. Realmente muy útil.
Muchas gracias!!!
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!
Publicado: 08/11/2007 8:28 am
Super bien esto, pero… y si quieres quitar un file??
Espero una respuesta, gracias!
Publicado: 14/11/2007 5:37 pm
me mandaron a construir un block gmail como lo puedo hacer
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.
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
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.
Publicado: 18/07/2008 12:46 pm
muy buen aporte. gracias por todo
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
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.
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.
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.
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
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
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…..
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.
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