入力タイプは=ファイルがonclickイベントに添付

Question

私が持っているこのようなメニュー：

<ul class="sub"> 
    <li><a href="#">New</a></li> 
    <li><a href="#">Open</a></li> 
    <li><a href="#">Save</a></li> 
    <li><a href="#">Help</a></li> 
</ul> 

と私のような、でもファイルを開くダイアログをキックオフだろうオープンリーにonclickを添付したいのですがinput type="file"です。私はliのonclickイベントにコードを付けることはできますが、どのコードを添付するのか分かりません。

TIAは

Answer 1

あなたはそれを非表示にするページやスタイルに通常のinput type="file"を追加することができます。このような何か：

<input type="file" id="theFileInput" style="display:none;" /> 

（のみ、この例ではインラインスタイルを使用して、私はもちろんのマークアップからスタイルを分離することをお勧めします。）

次に、あなたがAに応じて、その上でクリックを開始することができますターゲット要素のクリックイベント。 input type="file"がまだそこにあると同じように相互作用することができ

$('#clickableLiElement').click(function() { 
    $('#theFileInput').click(); 
}); 

：jQueryの（あなたがliにidを設定し、あるいは独自に何らかの方法でセレクタでそれを識別できると仮定）で、それはようなものになるだろう他のフォーム要素それはユーザーには見えません。しかし、これはOpen Fileダイアログを起動し、その値を通常の要素に設定します。これはサーバーへのPOSTに通常含まれることがあります。

Answer 2

（デビッド）上記の答えは動作しますが、あなたがする必要がある、あなたのCSSファイルで：

opacity: 0; 
-moz-opacity: 0; 
filter:alpha(opacity=0); 

display:noneソリューションは、クロムやSafariで動作していません。

Answer 3

With JavaScript 

<input type="file" accept="images/*" name="images" id="images" onClick="showModal()"> 
 
<script> 
 
    function showModal(){ 
 
     alert("hi"); 
 
    } 
 
</script>