jQuery Mobile 调用单击或点击 Opera Mobile 中的隐藏输入[type=file]

Question

我有一个上传图像的表单，所以显然有一个 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。

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');
});

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