jQuery: simular un clic en un <input type = "file" /> no funciona en Firefox?

Duplicar posible:
In JavaScript can I make a “click” event fire programmatically for a file input element?jQuery: simular un clic en un <input type = "file" /> no funciona en Firefox?

Tengo una página web que tiene este aspecto

<html> 
    <head> 
     <title>File Upload Click Test</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    </head> 
    <body> 
     <div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div> 
     <input type="file"></input> 
    </body> 
</html>

Mi objetivo es tener el div criar a un clic evento en el entrada de archivo, y esto parece funcionar exactamente como ex pect en IE y Chrome, pero no funciona en Firefox (no se abre el explorador de archivos al hacer clic en div).

¿Hay alguna manera de hacer que esto funcione en FF?

Fuente

2009-12-01 kristian

que viene en FF4: https://developer.mozilla.org/en/using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method –

Ver esta respuesta http://stackoverflow.com/questions/210643/in -javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e/3030174 # 3030174 funciona en FF también – TheVillageIdiot

Esta mañana probé el script y funciona bien en firefox 4. Firefox 4 permite hacer clic en el evento en la entrada del archivo. – kriom

¿Hay alguna manera de hacer que esto funcione en FF?

No, y tampoco funciona en las versiones más comunes de IE. IE abrirá el diálogo, pero una vez que hayas seleccionado un archivo con él, el formulario no se enviará.

Abandon hope. La única forma de falsificar un cuadro de carga de archivos es utilizar la técnica de transparencia, y eso no se recomienda en absoluto ya que los navegadores pueden diseñar cajas de carga de archivos de forma diferente internamente (o incluso proporcionar un control de carga de archivos que no incluye un diálogo Examinar). por lo que es muy probable que termine con una forma inoperable.

Aprenda a amar el campo de carga de archivos grises, o use la mejora progresiva para reemplazarlo con Flash cuando esté disponible.

Fuente

2009-12-02 00:01:40 bobince

+42

Abandonar la esperanza. Comprobar. – kristian

Está funcionando ahora en Firefox 4. –

Bueno, gracias por no permitirme perder más tiempo ...Ya pasé un par de días sobre esto con la esperanza en la mano. –

Aquí está la solución (FF). El bit HTML:

<label>Upload Business Logo</label> 
<input type="file" name="logo" id="logo" class="file-upload" /> 
<input type="text" id="text-logo" class="text-upload" readonly/> 
<input type="button" id="btn-logo" class="btn-upload" alt="" />

CSS para el tipo de archivo de entrada:

.file-upload { display:none; }

El bit de jQuery:

//bind click 
$('#btn-logo').click(function(event) { 
    $('#logo').click(); 
}); 

//capture selected filename 
$('#logo').change(function(click) { 
    $('#text-logo').val(this.value); 
});

Al formulario de envío, el archivo de entrada oculta cargará el archivo. Espero que esto ayude :)

Fuente

2012-02-20 01:15:34

¿Has probado el código? Si fuera así de fácil, ¿por qué el asker estaría aquí? ¿Por qué estaría aquí? La última vez que lo verifiqué, no puede establecer el valor de una entrada de archivo. Y aparentemente tampoco puedes desencadenar eventos sobre ellos. Probablemente razones de seguridad. – Stoutie

Lo retiro, parece que es así de simple. Pero no funciona cuando lo intento en la consola. Cuando coloco el código en mi documento, parece funcionar bien. Derp. – Stoutie

+1 esto funciona perfectamente, ¡simplemente no en la consola! Extraño, supongo que es por motivos de seguridad. – ksloan

jQuery: simular un clic en un <input type = "file" /> no funciona en Firefox?

Respuesta

Cuestiones relacionadas