Jquery: evento click hacia un input file

Jeibi · #1 (**permalink**) 27/09/2010, 04:32

Hola,

alguien sabe como genero el evento click hacia un input file?

yo he probado con esto:

Código:

<input name="ruta" id="ruta" type="file" />

<a onclick="javascript:$('#ruta').trigger('click');">Enviar</a>

pero esto no me funciona, no hace nada.

gracias

Dany_s · #2 (**permalink**) 27/09/2010, 05:59

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Prueba</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#elInput').click( function (){
                    alert("Click");
                });
            })
        </script>
    </head>
    <body>
 
    <input type="file" id="elInput" />
 
    </body>
</html>

Jeibi · #3 (**permalink**) 27/09/2010, 07:24

Hola Dany_s,

gracias por tu respuesta. No es eso a lo que me refiero, porque ahí tienes que hacer click en el propio elemento input file. Yo lo que quiero es desde otro elemento, una etiqueta <a> por ejemplo, que lleve una imagen, al clicar consiga el evento click del elemento input file, que puede estar oculto por ejemplo.
No se si me expliqué bien.

gracias de todas maneras

saludos

Dany_s · #4 (**permalink**) 27/09/2010, 09:02

no me hacia caso lanzar un click, busqué un rato y según lo que leí en firefox no se puede por algo de seguridad

Lo primero que hice fue darle opacidad 0 al input y colocar un texto encima, funcionaba pero en ie habia que dar doble click. En ie cuando das click en un label se abre la ventana pero en ie no, entonces uso el input arriba y en ie uso el label arriba, el *height:0; es porque me queda el puntero y con eso no aparece

probá que onda, es solo css

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Prueba</title>
    </head>
    <style>
 
    #divInput{
        width:100px;
        height:20px;
        overflow:hidden;
        background:red;
        position:relative
    }
    #divInput label{
        overflow:hidden;
        position:absolute;
        z-index:1;
        *z-index:2
    }
    #elInput{
        position:absolute;
        -moz-opacity:0 ;
        filter:alpha(opacity: 0);
        opacity: 0;
        z-index:2;
        *z-index:1; *height:0;
    }
 
    </style>
    <body>
 
        <div id="divInput">
            <label for="elInput">Buscar archivo</label>
            <input type="file" id="elInput" />
        </div>
 
    </body>
</html>

si no te sirve busca otros scripts, vi muchos ejemplos que usan css y javascript

Jeibi · #5 (**permalink**) 27/09/2010, 09:23

Mas o menos es lo que he hecho yo, poniéndole una imagen encima. No es exactamente lo que busco, porque me gustaría que pudiera hacerse el click con una imagen pequeña, pero al menos no se ve el textbox ni el botón examinar.

Gracias por tu ayuda

Dany_s · #6 (**permalink**) 27/09/2010, 09:52

Cita:

Iniciado por Jeibi

Mas o menos es lo que he hecho yo, poniéndole una imagen encima. No es exactamente lo que busco, porque me gustaría que pudiera hacerse el click con una imagen pequeña, pero al menos no se ve el textbox ni el botón examinar.

Gracias por tu ayuda

y bueno, en vez de un link poné una imagen jeje

a ver que logro, agunta si no llego hoy pruebo mañana

saque el fondo rojo y agregué un fondo al div y el tamaño al label

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Prueba</title>
    </head>
    <style>
 
    #divInput{
        width:10px;
        height:10px;
        overflow:hidden;
        position:relative;
        background:url("http://www.rubensoifer.com.ar/prensa_esperanza_archivos/btn_ampliar_imagen.gif");
    }
    #divInput label{
        overflow:hidden;
        width:10px;
        height:10px;
        position:absolute;
        z-index:1;
        *z-index:2
    }
    #elInput{
        position:absolute;
        -moz-opacity:0 ;
        filter:alpha(opacity: 0);
        opacity: 0;
        z-index:2;
        *z-index:1; *height:0;
    }
    </style>
    <body>
 
        <div id="divInput">
            <label for="elInput"></label>
            <input type="file" id="elInput" />
        </div>
 
    </body>
</html>

Jeibi · #7 (**permalink**) 28/09/2010, 04:13

Gracias Dany_s, es justo lo que buscaba, tenía un problema con los estilos en el posicionamiento.
Muchas gracias

saludos