JQUERY

Question

我有一个表单，我上传图像，所以显然有一个输入[type = file]有一个.image-upload类，但因为它看起来很难看我隐藏它（显示：无）而是有一个漂亮的按钮，说上传（类.upload），点击我想触发输入[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事件会在输入字段上触发click事件。我无法使用点击事件来处理触发器。此代码适用于我的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

试试这个吗？ DEMO 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
    });
});

jQuery Mobile呼叫点击或点击Opera Mobile中的隐藏输入[type = file]

3 个答案:

JQUERY