2

私は画像をアップロードしているフォームを持っているので、明らかに .image-upload のクラスを持つ input[type=file] がありますが、見た目が悪いので非表示 (表示: なし) にして、代わりにかなりアップロード (class .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/yeyene/5kfnT/1/

Jクエリ

$(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 に答える