Evento click en jQuery

[crea3d]

Necesito la ayuda de la comunidad, pues no llego a realizar un pequeño script con jQuery para que haga la siguiente tarea: Necesito dar click en un span o div y que se active un input file, de tal manera que simule el haber dado click sobre el input file y salga la ventana de busqueda de archivo.

Si alguien tiene la solucion, porfa ayudeme, porque no soy tan ducho en jQuery.

Gracias.

[sneyder05]

Saludos

Puedes usar la funcion trigger, que te permite lanzar un evento del control seleccionado.

Ahora supongamos que tienes el siguiente HTML para tu input:

Código PHP:

  <input type="file" id="my_file" />
<br/>
<span id="open_my_file">Seleccionar</span> 
   

Según eso, tu código JS sería el siguiente:

Código PHP:

  $('#open_my_file').click(function(){
    $('#my_file').trigger('click');
}); 
   

[crea3d]

Probando el script, algo asi hice y no funciono, vamos a ver, ya les cuento.

[crea3d]

Si funciona muchas gracias amigo Sneyder05

[crea3d]

Por favor mas ayuda. Hasta aqui esta bien. Pero como seria si quiero acceder al input file anterior al span, sin especificar una clase o un identificador?

[Shirak2]

Usa .prev()

[crea3d]

Ok Shirak2, lo hare y tendre noticias, gracias.

[crea3d]

Pongo mi html, para que se den una idea:

<div id="bloque_capitulo1_libro" >
<div>
<label> 1. Capitulo </label>
<input type="text" name="capitulo1_libro" id="capitulo1_libro"/>
<span class="borrar_campos" > - </span>
</div>
<div>
<div class="css_file">
<label> Subir Capitulo </label>
<div class="input_file">
<div class="boton_file" >Examinar</div>
<input type="file" name="file_capitulo1_libro" id="file_capitulo1_libro" class="input_file_capitulo" />
</div>
<span class="nombre_file" >Ningún archivo seleccionado</span>
</div>
</div>
</div>
<div id="bloque_capitulo2_libro" >
<div>
<label> 2. Capitulo </label>
<input type="text" name="capitulo2_libro" id="capitulo2_libro"/>
<span class="borrar_campos" > - </span>
</div>
<div>
<div class="css_file">
<label> Subir Capitulo </label>
<div class="input_file">
<div class="boton_file" >Examinar</div>
<input type="file" name="file_capitulo2_libro" id="file_capitulo2_libro" class="input_file_capitulo" />
</div>
<span class="nombre_file" >Ningún archivo seleccionado</span>
</div>
</div>
</div>

entonces lo que hago es que por un script al dar click en el span se active el input file a travez de un identificador y me pida buscar un archivo.

Hasta alli esta bien, el asunto ahora es que al dar click en el span .nombre_file se active el input file anterior a este span.

Lo hice con prev y con prevAll y no pasa nada.

$("span.nombre_file").click(function(){
$(this).prevAll(".input_file_capitulo:first").trig ger("click");
});

Alguna idea?

[sneyder05]

Según la maquetación que tienes debes tener el siguiente código:

Código PHP:

  $('.nombre_file').click(function(){
    $(this).prev().find(':file').trigger('click');
}); 
   

Lo que sucede dentro del evento click es que capturas el control anterior al span, lo cual retornaría un div.input_file, después buscas con find el input con type=file y lanzas el evento trigger.

Intenta con este código y nos cuentas.

Saludos

[crea3d]

Amigo Sneyder05, eres lo maximo, probe con algo asi, pero no funciono, estoy aprendiendo la filosofia de jQuery, te agradezco muchisimo, seguire con mi proyecto y te contare.
Dios te bendiga.

A ver si nos podemos comunicar por skype o facebook para compartir proyectos.

Mandame un mensaje directo.