Щелчок триггера Jquery не работает в браузерах Safari на Mac, Ipad и Iphone - PullRequest
Новая
       3

Щелчок триггера Jquery не работает в браузерах Safari на Mac, Ipad и Iphone

12 голосов
/ 19 января 2012

Я пытаюсь вызвать событие щелчка на входе type = "file" нажатием другой кнопки.

Демо: http://jsfiddle.net/Y85g6/

Он отлично работает во всех браузерах, кроме браузеров Safari в Mac, Ipad и Iphone.

Есть ли уловка для выполнения этой задачи?

Ответы [ 11 ]

14 голосов
/ 08 апреля 2013

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

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); 
document.getElementById(elem_id).dispatchEvent(evt);
6 голосов
/ 24 января 2012

Нашли альтернативу.

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

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

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

5 голосов
/ 01 ноября 2013

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

1 голос
/ 23 июля 2014

.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

1 голос
/ 28 февраля 2013

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

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

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

1 голос
/ 26 июня 2012

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

$(".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");
    });
});
1 голос
/ 12 февраля 2012

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

1 голос
/ 19 января 2012

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

0 голосов
/ 30 июля 2015

просто удалите "display: none" и используйте "visibility: hidden" и работает через браузер.

0 голосов
/ 17 января 2014

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

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

Страница:
...