【问题标题】：jQuery Mobile calling click or tap on a hidden input[type=file] in Opera MobilejQuery Mobile 调用在 Opera Mobile 中点击或点击隐藏的输入[type=file]
【发布时间】：2013-06-12 20:26:25
【问题描述】：

我有一个要上传图像的表单，所以显然有一个 input[type=file] 有一个 .image-upload 类，但因为它看起来很难看，我把它隐藏了（显示：无），而是有一个漂亮的按钮，上面写着上传（.upload 类），点击时我想触发 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 中。

【问题讨论】：

标签： jquery jquery-mobile opera-mini opera-mobile

【解决方案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');
});

请注意，点击事件会在输入字段上触发点击事件。我无法让点击事件与触发器一起使用。此代码适用于我的 Android 股票浏览器和 Opera 移动浏览器版本。 21.0.01437

【讨论】：

【解决方案2】：

使用 jQuerymobile，您最好使用像 vclick 这样的虚拟事件。像

那样给予一些东西

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

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

【讨论】：

这仍然没有打开文件选择器:(
哼，那你能把你的HTML放进去吗？（或设置一个jsfiddle？）编辑：Nvm，如果它是特定于歌剧的，我想我无能为力：p

【解决方案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
    });
});

【讨论】：