Comunidad de diseño web y desarrollo en internet online

Ampliar la cantidad de slots para subir archivos

Citar            
MensajeEscrito el 25 Feb 2008 06:01 am
Desde ya pido disculpas, debe existir un tema como este y deben haber miles de soluciones en google, pero recurro al foro porque realmente no tengo idea de cómo buscarlo ni como encontrarlo :S

El tema es sencillo: estoy haciendo una web donde hay la opción de subir imágenes.
Para ello se guia por un link que abre un popup donde aparece el consecuente formulario con slot para subir archivos, en fin...

Lo que quiero hacer es poner una lista desplegable, del 1 al... 10, por ejemplo, para que aparezcan esa cantidad más de slots para subir más imágenes a la vez.

...Gmail tiene algo parecido para adjuntar archivos, solo que en lugar de ser un select es un link

me gustaría hacerlo con ajax, para evitar refrescar la página, pero como ya dije, debe haber tutoriales de esto por todos lados, pero no sé cómo buscarlos :oops:

desde ya, si pueden ayudarme, les agradezco =)

y, si no peco de "vaga", si pudiera ser una explicación sencilla porque con ajax recién estoy aprendiendo y no entiendo mucho :P

gracias por su atención ^^

Por angel_eskarlata

68 de clabLevel



Genero:Femenino  

Baires City

opera
Citar            
MensajeEscrito el 25 Feb 2008 09:23 am
uhm...
¿acaso no vale con poner los suficientes "<input type="file" />" seguidos uno tras otro?

(si lo que se quiere, es ocultarlos/mostrarlos, se podría hacer con javascript:appendChild/removeChild)

Código :

<style type="text/css">
div{border:red 1px solid; padding:1px; margin-top:15px;}
</style>

<script>
function añadir(i)
{nuevo_elemento=document.createElement('div');
 nuevo_elemento.setAttribute('id','input'+(i+1));
 nuevo_elemento.innerHTML='<a href="#" onclick="javascript:quitar('+(i+1)+');">quitar siguientes:</a><br />'+
                          '<input type="file" /><br />'+
                          '<a href="#" onclick="javascript:añadir('+(i+1)+');">añadir nuevo</a>';
 contenedor=document.getElementById('input'+i);
 contenedor.appendChild(nuevo_elemento);
}

function quitar(i)
{borrar_hijo_de=document.getElementById('input'+(i-1));
 borrar_hijo_de.removeChild(borrar_hijo_de.lastChild);
}
</script>

<body>
<div id="input1"><input type="file" /><br /><a href="#" onclick="javascript:añadir(1);">añadir nuevo</a></div></body>


¿bien?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 25 Feb 2008 07:02 pm
Gracias, ha funcionado de maravilla :)

pero ahora tengo otro problema... un tanto raro :?

copié ese código y por supuesto lo modifiqué para adecuarlo a mi página.
El problema me surge en el Opera (en firefox y ie7 anda perfecto):
como verás, cambié el link para quitar los input, para que aparezca una sola vez, entre otras cosas:

Código :

<script>
function aniadir(i){
   nuevo_elemento=document.createElement('div');
   nuevo_elemento.setAttribute('id','input'+(i+1));
   nuevo_elemento.setAttribute('class','input');
   nuevo_elemento.innerHTML='Archivo: <input type="file" name="arch'+(i+1)+'" />'+
                     '<div class="descr">Descripci&oacute;n: <input class="txtf" type="text" name="desc'+(i+1)+'" /></div>';
   contenedor=document.getElementById('input'+i);
   contenedor.appendChild(nuevo_elemento);
   

   cont=document.getElementById('quitar');
   cont.innerHTML='<a href="#" onclick="javascript:quitar('+(i+1)+');">Quitar Archivos</a>';
}
</script>




<div id="input1" class="input">
                Archivo: <input type="file" name="arch1" />
                <div class="descr">
                   Descripci&oacute;n: <input class="txtf" type="text" name="desc1" />
                </div>
                <a href="#" onclick="javascript:aniadir(1);"><p>Agregar m&aacute;s im&aacute;genes</p></a><p id="quitar"></p>
                
</div>



Al asunto es que en Opera andaba perfecto cuando hice el cambio (lo uso de navegador principal, donde pruebo mis webs primero...), al refrescar la página para ver los cambios. Todo perfecto.
Por error, lo cerré, y cuando lo volví a abrir... pues ya no funcionó :?
como dije, en ie7 y ff anda perfecto, el problema solo surgió en el opera
borré toda la caché a ver si podía ser eso, pero sigue con problemas

lo que sucede es que al darle al botón de agregar, aparece por un milisegundo el input nuevo y desaparece instantáneamente... :?
Lo más curioso, es que cuando hago un envío de datos erroneo con el primer input (que php devuelve un include del mismo archivo + un texto de advertencia por el error, es decir, no toca NADA del js) anda bien!
yo no entiendo nada :S

alguien tiene idea de por qué puede suceder esto en el opera? :S

Por angel_eskarlata

68 de clabLevel



Genero:Femenino  

Baires City

opera
Citar            
MensajeEscrito el 28 Feb 2008 03:16 am
más raro aún:
si entro por localhost anda mal
si entro por mi ip.... anda bien
no entiendo nada -.-

Por angel_eskarlata

68 de clabLevel



Genero:Femenino  

Baires City

opera
Citar            
MensajeEscrito el 28 Feb 2008 08:15 am
a ver con la modificación que has hecho, generas código erróneo.
Has quitado la generación consecutiva de IDs, con lo que todos los DIV tienen la misma ID (input2), y todos los INPUT, el mismo name (desc2)

Otro problema, es q en el código q has puesto, no existe la función "quitar()"

Te diría que revisases primero la generación de IDs y NAMEs, para que no sea siempre la misma, y luego que funcione en Opera.

Lo de funcionar o no en localhost... debe ser alguna restricción de tu máquina... imagino

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.