Upload Multiple tipo Gmail
- 08/10/2006
- 1:54 am
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.
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.
Posts Relacionados
- SWFUpload beta
- Upload de Archivos con PHP
- FTP Upload con PHP
- Upload de Archivos con Flash
- Upload de archivos > 2Mb (PHP)
Total de Comentarios: 16
Como puedo guardar la direccion de esos archivos que se suben en una base de datos??
muchas gracias
saludos
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.
Bueno, me podrian por favro explicar como quedaria el upload de archivos multiples con PHP.
Gracias
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
Hola, tienes mucha razón de esta forma queda mucho mejor, gracias por tu aporte.
Saludos
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 :)
Genial!! esta muy bien pensado tu recurso, y con lo que dice renzo_xp queda de perlas
GRACIASSS!!!
muchas gracias!!, me fue muy util.
buen manejo del dom, y si quiero enviar con ajax el elemento FILE ?
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
Muy buenos los códigos. Realmente muy útil.
Muchas gracias!!!
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!
Super bien esto, pero… y si quieres quitar un file??
Espero una respuesta, gracias!
me mandaron a construir un block gmail como lo puedo hacer
http://www.buayacorp.com/archivos/enviar-o-subir-multiples-archivos-adjuntos-al-estilo-gmail/
esto les servira es justo lo que quieren.
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
