2

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

4

3 回答 3

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

于 2014-05-31T19:45:03.167 回答
0

试试这个？演示http://jsfiddle.net/yyene/5kfnT/1/

查询

$(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
    });
});
于 2013-06-13T02:54:55.380 回答
0

使用 jQuerymobile，您最好使用虚拟事件，例如vclick. 给予一些东西

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

    $('.ui-page-active .upload').tap(function() {
        $('.ui-page-active .image-upload').trigger("vclick");
        return false;
    });
});
于 2013-06-12T20:31:52.580 回答