jQuery Mobile вызывает или нажимает на скрытый ввод [type=file] в Opera Mobile

Question

У меня есть форма, куда я загружаю изображения, так что, очевидно, есть вход [type = file], который имеет класс.image-upload, но, как это выглядит уродливо, я спрятал его (display: none) и вместо этого получил симпатичный кнопка с надписью upload (class.upload) и при нажатии я хочу вызвать событие tap / click для элемента input [type = file], чтобы пользователь мог затем загрузить изображение.

Код ниже работает на настольном компьютере, но не на мобильном устройстве. Если я изменю.click на.tap ниже, то это нигде не работает?

$(document).bind('pageshow', function() {
    $('.ui-page-active .upload').tap(function() {
        $('.ui-page-active .image-upload').click();
        return false;
    });
});

---

Обновление, я никогда не думал, что это может быть проблема конкретного браузера, но этот код работает в стандартном браузере Android, а не в Opera.

Answer 1

Как и у OP, у меня была такая же проблема, но она была с браузером Android по умолчанию (4.4.2). Когда поле ввода файла было скрыто, я не мог вызвать щелчок даже по нему. Я исправил это, сохранив элемент ввода видимым, технически (т.е. опуская display:none атрибут), и просто переместить его за пределы экрана. Например, HTML был примерно таким:

<div style="height:1px;width:1px;overflow:hidden;margin-left:-999px">
    <input id="photoInput" type="file" accept="image/*" capture>
</div>
<input id="takePhoto" type="button" value="Take photo">

И JS был:

$('#takePhoto').tap(function() {
    $("#photoInput").trigger('click');
});

Обратите внимание, что событие касания вызывает событие щелчка в поле ввода. Я не смог заставить событие tap работать с триггером. Этот код работает в моем стоковом браузере Android и в мобильном браузере Opera. 21.0.01437

Answer 2

С jQuerymobile вам лучше использовать виртуальные события, такие как vclick, Давать что-то по линии

$(document).bind('pageshow', function() {

    $('.ui-page-active .upload').tap(function() {
        $('.ui-page-active .image-upload').trigger("vclick");
        return false;
    });
});

Answer 3

Попробуй это? ДЕМО http://jsfiddle.net/yeyene/5kfnT/1/

Jquery

$(document).ready(function(){
    $(function() {
        // Bind the tapHandler callback function to the tap event on div.box
        $( ".upload" ).on( 'vclick', tapHandler ); 
        // Callback function references the event target and adds the 'tap' class to it
        function tapHandler() {
            $('.image-upload').trigger('click');
        }
    });

    $('.image-upload').click(function(){
        alert('Upload image!');
        // your upload image script here
    });
});