Jquery déclencher cliquez sur ne travaillent pas sur les navigateurs safari sous mac, Ipad & Iphone

Je suis en train de déclencher un événement de clic sur input type="file" sur le fait de cliquer sur un autre bouton.

Démo: http://jsfiddle.net/Y85g6/

Ça fonctionne dans tous les navigateurs, sauf sur les navigateurs safari sous mac, Ipad & Iphone.

Est-il une astuce pour accomplir cette tâche?

double possible de En JavaScript puis-je faire un événement "click" feu par programme pour un fichier d'entrée de l'élément?
alors, comment faire un fichier personnalisé fonctionnalité de navigation.
Soit ne pas le faire, ou le faire avec un Flash à base de solution comme SWFUpload.

OriginalL'auteur Mandeep Pasbola | 2012-01-19

  1. 13

    Au lieu de trigger("click") vous pouvez utiliser le code suivant qui fonctionne correctement dans tous les navigateurs:

    var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); 
document.getElementById(elem_id).dispatchEvent(evt);
    Seulement initEvent() est maintenant obsolète. Le jQuery.trigger("click") a l'avantage de l'utilisation de la nouvelle interface disponible la mise à disposition de...

    OriginalL'auteur Sattu

  2. 6

    Trouvé une solution de rechange.

    Juste la position de l'entrée type="file" sur le bouton personnalisé par le positionnement absolu et de l'utiliser jQuery fadeTo('fast',0) de le cacher.

    Maintenant, si on clique sur le bouton personnaliser le fichier de la fenêtre d'affichage apparaît.

    Son travail dans tous les navigateurs de bureau, mais pas dans iPhone & iPad car ils ne permettent pas de télécharger n'importe quel fichier.

    que jQuery juste définit l'opacité à 0. CSS est probablement plus appropriée que l'utilisation d'une animation jQuery

    OriginalL'auteur Mandeep Pasbola

  3. 5

    faire l'élément visible, comme l'événement déclencheur ne fonctionne pas sur les éléments cachés dans safari pour mac.

    OriginalL'auteur rajansoft1

  4. 1

    Navigateurs peuvent être très capricieux quand il s'agit de JavaScript interactions avec le fichier des entrées, pour des raisons de sécurité. Safari ne vous empêche de tirer tout sur les événements. Certaines versions de Chrome et Firefox ont également cette restriction. Cela a été déjà discuté ici.

    OriginalL'auteur ceejayoz

  5. 1

    De son mieux pour utiliser les CSS au lieu de JS pour cacher élément, car il rendra votre élément caché directement.

    OriginalL'auteur Trython

  6. 1

    L'approche suivante a fait le tour pour moi:

    $(".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");
    });
});

    OriginalL'auteur John Erck

  7. 1

    Ne sais pas si quelqu'un est de la lecture de cette question, mais j'ai récemment eu un problème similaire avec Safari, j'ai donc pensé que je pourrais partager avec vous.

    Tout d'abord, comme ceejayoz mentionnés, voir la discussion ici: En JavaScript puis-je faire un événement "click" feu par programme pour un fichier d'entrée de l'élément?

    La solution, alors, si vous ne voulez pas utiliser le bouton de positionnement, est d'afficher le fichier d'entrée bouton (supprimer le "display:none;") et au lieu de les masquer à l'aide de "opacity:0;". Vous avez sans doute aussi envie de position absolue, il n'a donc pas d'interagir avec d'autres éléments. De toute façon, de cette façon, vous pouvez toujours utiliser JS pour activer le fichier d'entrée dans tous les navigateurs.

    OriginalL'auteur Sam Grondahl

  8. 1

    .cliquez sur() n'est pas pris en charge dans Safari. Sattu la suggestion devrait fonctionner. Mais vous n'avez pas besoin de Javascript pour la personnalisation du fichier d'entrée bouton. 

    <label><input type="file" id="file" name="file" style="position:absolute; left:-9999px;" />Upload</label>

    Référence: http://noypiscripter.blogspot.com/2014/04/simplest-cross-browser-custom-upload.html

    OriginalL'auteur noypiscripter

  9. 0

    J'ai eu la réponse la plus simple pour ce

    opacity : 0.01 sur votre fichier d'entrée de l'élément de

    OriginalL'auteur eighteyes

  10. 0

    simplement supprimer "display:none" et l'utilisation "visibility:hidden" et des œuvres de la croix-navigateur.

    OriginalL'auteur PIYUSH JAIN

  11. -1

    Essayez de charger votre script dans le pied de page. J'ai eu un problème similaire à quelques reprises et qui a fait le tour.

    OriginalL'auteur Susan