JQuery триггер не работает над браузерами сафари в Mac, Ipad и Iphone

Ответ 1

Найдена альтернатива.

Просто поместите ввод type="file" поверх пользовательской кнопки, выполнив абсолютное позиционирование и используйте jQuery fadeTo('fast',0), чтобы скрыть его.

Теперь, если мы щелкнем по пользовательской кнопке, появится окно браузера.

Работает во всех настольных браузерах, но не в iPhone и iPad, так как они не позволяют загружать файлы.

Ответ 2

Вместо trigger("click") вы можете использовать следующий код, который успешно работает во всех браузерах:

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

Ответ 3

сделать элемент видимым, поскольку событие триггера не работает с скрытыми элементами в сафари Mac.

Ответ 4

Браузеры могут быть очень изящными, когда речь идет о взаимодействиях JavaScript с файловыми входами по соображениям безопасности. Safari не позволяет вам запускать любые события кликов на них. Некоторые версии Chrome и Firefox также имеют это ограничение. Это было ранее обсуждалось здесь.

Ответ 5

Лучше использовать CSS вместо JS, чтобы скрыть элемент, потому что он будет отображать ваш элемент как скрытый напрямую.

Ответ 6

Следующий подход помогло:

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

Не уверен, что кто-то читает этот вопрос больше, но у меня недавно была аналогичная проблема с Safari, поэтому я подумал, что хочу поделиться.

Во-первых, как упоминалось ceejayoz, см. обсуждение здесь: В JavaScript я могу сделать событие "click" программным способом для элемента ввода файла?

Тогда решение, если вы не хотите использовать позиционирование кнопок, должно отображать кнопку ввода файла (удалить "display: none;" ) и вместо этого скрыть его с помощью "opacity: 0;". Возможно, вы также захотите установить абсолютное положение, чтобы оно не взаимодействовало с другими элементами. В любом случае, вы все равно можете использовать JS для активации ввода файла во всех браузерах.

Ответ 8

.click() не поддерживается в Safari. Предложение Сатту должно работать. Но вам не нужен Javascript для настройки кнопки ввода файла.

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

Ссылка: http://noypiscripter.blogspot.com/2014/04/simplest-cross-browser-custom-upload.html

Ответ 9

Я получил самый простой ответ для этого

opacity : 0.01 в элементе входного файла

Ответ 10

просто удалите "display: none" и используйте "видимость: скрытый" и работайте с перекрестным браузером.

Ответ 11

Попробуйте загрузить script в нижнем колонтитуле. У меня была аналогичная проблема несколько раз, и это сделало трюк.