Problema al hacer clic() en la entrada [tipo = archivo]

Tengo un problema con la función click(). No funciona en Opera.Problema al hacer clic() en la entrada [tipo = archivo]

Estoy tratando de hacer un input type=file hecho clic en onclick evento de otro elemento. Necesito diseñar mi elemento de entrada type=file, así que lo hice invisible y lo reemplacé con un botón de estilo simple. Ahora quiero hacer clic en el elemento de archivo cuando se hace clic en el botón.

No puedo usar jQuery porque estoy usando la biblioteca MooTools para un calendario en mi página y crea conflicto cuando intento usar jQuery. También traté de evitar el conflicto usando jQuery.noConflict(); pero no pude hacerlo porque soy nuevo en jQuery. Aquí está mi código html:

<input name="myfile" id="uploadme" type="file" style="visibility:hidden; width:1px;" onchange="this.form.submit()"/> 
<input type="button" id="clickme" onclick="show_upload()"/>

Y aquí es mi código JavaScript:

function show_upload() 
{ 
    document.getElementById('uploadme').click(); 
}

También probé el código de jQuery, pero no pude hacer que funcione sin conflictos con la biblioteca MooTools:

jQuery.noConflict(); 
(function($){ 
    $('#clickme').click(function($){ 
     $('#uploadme').click(); 
    })(jQuery); 
});

Fuente

2011-08-07 Rafael Sedrakyan

¿Por qué ha añadido la etiqueta jQuery si no puede usarlo? – PeeHaa

@PeeHaa: Probablemente quiere ayuda para hacer que jQuery funcione con MooTools, por lo que una pregunta etiquetada 'jquery' no es tan extraña :) – pimvdb

No estoy seguro para el clic de entrada (podría ser imposible por razones de seguridad), pero su código jQuery no es del todo correcto.

jQuery.noConflict(); 

(function($){ 
    $('#clickme').click(function(){ // The $ is not necessary - you already have it 
     $('#uploadme').click(); 
    }); // You should remove (jQuery) because you don't want to call the function here 
})(jQuery); // you need (jQuery) to actually call the function - you only defined the function

De todos modos, esta respuesta dice que no puede hacer lo que quiera en Opera: In JavaScript can I make a "click" event fire programmatically for a file input element?

Fuente

2011-08-07 17:01:38 pimvdb

+1 para el enlace – Halcyon

Tenías razón sobre el código de jquery :) pero lo hice en el manera descrita en el enlace que publicaste. Muchas gracias por la ayuda. ¡ –

no funciona por ahora en un navegador moderno! –

input[type=file] es el tipo de entrada muy peculiar, realmente no se puede hacer mucho con ella, principalmente por razones de seguridad.

Estoy adivinando aquí, pero ¿acaso quieres que tengas tu propio botón de carga estilo? En ese caso, debo decepcionarte, no puedes hacerlo con HTML. Ya sea que usted tiene que utilizar HTML5 o Flash (como SWFUpload)

Fuente

2011-08-07 17:11:59 Halcyon

http://jsfiddle.net/sSSNj/159/ marca este enlace y verás que puedes tener tu propio botón de carga :) –

Sí, pero estás usando un hack 'visibility: hidden'. Creo que es solo por la benevolencia de los navegadores que funciona, y aparentemente no funciona en Opera. – Halcyon

+1 porque esto es cierto. 'input type = file' es muy vulnerable a la piratería y, por lo tanto, está bastante bloqueado en sus características. Sí, hay hacks que funcionan en la mayoría de los navegadores para darle estilo, pero son solo eso: hacks, escritos para sortear las limitaciones de seguridad. Y existe la posibilidad de que dejen de trabajar en futuras versiones de navegador si modifican la seguridad. – Spudley

-2

Es imposible hacer clic en ese botón usando JavaScript (como amigos han dicho), pero ve esto:

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Lorem ipsum</title> 
    </head> 
    <body> 
     <input type="file" id="first" style="width:200px; background-color:red"> 
     <input type="file" id="second" style="width:200px; background-color:green; position:relative; left:-100px; opacity:0"> 
     <script> 
      document.getElementById("first").onchange = function(){alert("first")} 
      document.getElementById("second").onchange = function(){alert("second")} 
     </script> 
    </body> 
</html>

se puede hacer algo por el estilo. El único problema es que debe conocer las dimensiones de estas entradas. Hm ... Tal vez no es un problema. Puede establecer dimensiones. :>

Fuente

2011-08-07 17:32:22

Thansk. Ya lo hice de la manera que describiste hace 10 minutos. –

¿cómo podría hacer clic para el elemento de archivo? – Mahi

se trata de un error de Opera, pero no hay posibilidad de obtener el resultado de una manera diferente, utilizando <label> etiqueta:

<input type="file" id="file" style="position: absolute; visibility: hidden;"> 
<label for="file" id="file-label"></label> 
<a onclick="$('#file-label').click()">Browse..</a>

Fuente

2013-05-04 00:08:36

no es imposible:

var evObj = document.createEvent('MouseEvents'); 
evObj.initMouseEvent('click', true, true, window); 
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

Pero de alguna manera funciona solo si se trata de una función que se llamó a través de un evento de clic.

lo que podría tener la configuración siguiente:

html:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div> 
<input type="file" id="input_img">

JavaScript:

function openFileChooser() { 
     var evObj = document.createEvent('MouseEvents'); 
     evObj.initMouseEvent('click', true, true, window); 
     setTimeout(function() 
     { 
     document.getElementById('input_img').dispatchEvent(evObj);  
     },100);  
    }

Fuente

2015-10-03 00:24:15 EscapeNetscape

initMouseEvent se eliminará de muchos navegadores :( – Mahi

Problema al hacer clic() en la entrada [tipo = archivo]

Respuesta

Cuestiones relacionadas