Estoy tratando de desencadenar un clic en el tipo de entrada = "archivo" con el clic de otro botón.Jquery trigger click no funciona en los navegadores safari en mac, Ipad y Iphone
Demostración: http://jsfiddle.net/Y85g6/
Está funcionando muy bien en todos los navegadores excepto en los navegadores Safari en Mac, Iphone Ipad &.
¿Hay algún truco para lograr esta tarea?
Encontré una alternativa.
Simplemente coloque la entrada type="file" sobre el botón personalizado colocándolo en posición absoluta y use jQuery fadeTo('fast',0) para ocultarlo.
Ahora, si hacemos clic sobre el botón personalizado, aparece la ventana del navegador.
Está funcionando en todos los navegadores de escritorio pero no en iPhone & iPad ya que no permiten cargar ningún archivo.
que jQuery simplemente establece la opacidad en 0. CSS es probablemente más apropiado que usar una animación jQuery –
Los navegadores pueden ser muy quisquillosos cuando se trata de interacciones de JavaScript con entradas de archivos, por razones de seguridad. Safari evita que active eventos de clic en ellos. Algunas versiones de Chrome y Firefox también tienen esta restricción. Esto ha sido previously discussed here.
Entendido, no es posible para los navegadores safari de web-kit, gracias por la alternativa. –
Comparta otras alternativas también si están presentes. –
Es mejor usar CSS en lugar de JS para ocultar elemento porque hará que su elemento se oculte directamente.
El siguiente enfoque hizo el truco para mí:
$(".upload_on_click").each(function(index) {
var form = $(this).next("form");
//form.hide(); /* THIS TECHNIQUE DIDN'T WORK IN SAFARI */
form.css("position", "absolute");
form.css("visibility", "hidden");
$(this).css("cursor", "pointer");
$(this).click(function() {
$('input[type="file"]', form).trigger("click");
});
$('input[type="file"]', form).change(function() {
$('input[type="submit"]', form).trigger("click");
});
});
intente cargar el script en el pie de página. Tuve un problema similar varias veces y eso funcionó.
No estoy seguro si alguien está leyendo esta pregunta, pero recientemente tuve un problema similar con Safari, así que pensé en compartirlo.
primer lugar, como ceejayoz mencionó, véase la discusión aquí: In JavaScript can I make a "click" event fire programmatically for a file input element?
La solución, entonces, si no desea utilizar el botón de posicionamiento, es para mostrar el botón de entrada de archivo (eliminar el "display: none; ") y en su lugar ocultarlo usando" opacity: 0; ". Probablemente también quiera posicionarlo de forma absoluta para que no interactúe con otros elementos. De todos modos, de esta manera todavía puede usar JS para activar la entrada de archivos en todos los navegadores.
En lugar de trigger("click") se puede utilizar el siguiente código que funciona con éxito en todos los navegadores:
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
document.getElementById(elem_id).dispatchEvent(evt);
Solo 'initEvent()' ahora está en desuso. El 'jQuery.trigger (" click ")' tiene la ventaja de utilizar la última interfaz disponible que esté disponible ... –
hacen que el elemento visible, como el trabajo evento de disparo duerma en los elementos ocultos en Mac Safari.
Me dio la respuesta más simple para este
opacity : 0.01 en su elemento de archivo de entrada
.click() no es compatible con Safari. La sugerencia de Sattu debería funcionar. Pero no necesita Javascript para personalizar el botón de archivo de entrada.
<label><input type="file" id="file" name="file" style="position:absolute; left:-9999px;" />Upload</label>
Referencia: http://noypiscripter.blogspot.com/2014/04/simplest-cross-browser-custom-upload.html
basta con quitar "display: none" y utilizar "visibility: hidden" y funciona con navegadores.
posible duplicado de [¿En JavaScript puedo hacer que un evento de "clic" se active programáticamente para un elemento de entrada de archivo?] (Http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a -click-event-fire-programmatically-for-a-file-input) – ceejayoz
luego cómo hacer una funcionalidad de exploración de archivos personalizada. –
O no, o con una solución basada en Flash como SWFUpload. – ceejayoz