Jquery trigger click not working on safari browser

问题:

I am trying to trigger a click event on input type="file" on the click of an another button.

Demo: http://jsfiddle.net/Y85g6/

It's working fine in all browsers except on safari browsers in mac, Ipad & Iphone.

Is there any trick to accomplish this task?

回答1:

Instead of trigger("click") you can use the following code which works successfully in all browsers:

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); 
document.getElementById(elem_id).dispatchEvent(evt);

回答2:

Found an alternative.

Just position the input type="file" over the custom button by absolute positioning it and use jQuery fadeTo('fast',0) to hide it.

Now if we click over the custom button file browser window appears.

Its working in all desktop browsers but not in iPhone & iPad as they don't allow to upload any file.

回答3:

make the element visible, as trigger event doesnt work on hidden elements in mac safari.

回答4:

Browsers can be very finicky when it comes to JavaScript interactions with file inputs, for security reasons. Safari prevents you from firing any click events on them. Some versions of Chrome and Firefox also have this restriction. This has been previously discussed here.

回答5:

Its better to use CSS instead of JS to hide element because it will render your element as hidden directly.

回答6:

The following approach did the trick for me:

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

回答7:

Not sure if anybody is reading this question anymore, but I recently had a similar issue with Safari, so I thought I'd share.

First, as ceejayoz mentioned, see the discussion here: In JavaScript can I make a "click" event fire programmatically for a file input element?

The solution, then, if you do not want to use button positioning, is to display the file input button (remove the "display:none;") and instead hide it using "opacity:0;". You probably also want to absolute position it so it doesn't interact with other elements. Anyway, this way you can still use JS to activate the file input in all browsers.

回答8:

.click() is not supported in Safari. Sattu's suggestion should work. But you don't need Javascript for customizing input file button.

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

Reference: http://noypiscripter.blogspot.com/2014/04/simplest-cross-browser-custom-upload.html

回答9:

I got the simplest answer for this

opacity : 0.01 on your input file element

回答10:

simply remove "display:none" and use "visibility:hidden" and works cross browser.

回答11:

Try loading your script in the footer. I had a similar problem a few times and that did the trick.