6

目に見えないものの上に div を使用するというこのアイデアをテストしている<input type="file" />ので、派手なファイルアップロードボタンを作成できます。私はいくつかのコードを見てきましたが、やや複雑でした。jQueryを使用してdivコンテナから入力タグのクリックをトリガーするというこのアイデアを試すことを考えました

HTML:

<div id="container">&nbsp;Click Me!&nbsp;
    <input type="file" id="file" />
</div>

Javascript:

$(document).ready( function() {
    $('#container').click( function() {
        $('#file')[0].click();
    })
});

コードは Chrome と IE では正常に実行されますが、Safari では実行されず、Firefox では面白い問題があります。クリックが 2 回トリガーされます! これがなぜそうなのか、何か考えはありますか？jQuery はクロスプラットフォームであるはずですが、私は困惑しています。ここにフィドルがあります

http://jsfiddle.net/kostasd/C4sCs/1/

助けてくれてありがとう！

コスタス

4

1 に答える 1

5

私が試したさまざまな可能な解決策は

  • Visiblity:hidden; の使用 幅:1px; ファイル入力要素の場合。

そのためのjsfiddleは次のとおりです http://jsfiddle.net/C4sCs/36/

  • Css のみを使用してファイル入力クリックを呼び出し、jquery をまったく使用しない

    #container {
border:1px solid #b0b0b0;
display: inline-block;
position:relative;
overflow:hidden;
cursor:pointer;
}
#file {  
position:absolute;
top:0;
opacity:0;
display:block;
}

http://jsfiddle.net/C4sCs/42/

于 2014-04-25T06:59:48.187 に答える