javascript - リンクをファイル入力として機能させる方法

Question

リンクがあります、

<a id="upload-file">Upload your photo</a>

クリックすると、ファイルの参照入力として機能するようにします

<input id="upload-file" type="file"/>

どうすればこれを達成できますか？

score 85 · Accepted Answer

HTML

<input id="upload" type="file"/>
<a href="" id="upload_link">Upload your photo</a>

CSS

#upload{
    display:none
}

JS

$(function(){
    $("#upload_link").on('click', function(e){
        e.preventDefault();
        $("#upload:hidden").trigger('click');
    });
});

score 17 · Accepted Answer

HTMLのみ

これは、CSS、Javascript/jQuery なしで機能し、フレームワークインフラストラクチャに依存しない非常にシンプルな答えです。

<label>
  <input type="file" style="display: none;">
  <a>Upload Photo link</a>
</label>

またはさらに単純な

<label>
  <input type="file" style="display: none;">
  Upload Photo link
</label>

score 7 · Accepted Answer

以下は問題を解決します

html

<input id="upload-file" type="file"/>
<a id="fileupload">Upload your photo</a>

CSS

#upload-file{
    display: none;
}

js

$("#fileupload").click(function(){
    $("#upload-file").click();
});

score 2 · Accepted Answer

クリックをシミュレートするために<input>呼び出すことができる非表示のタグを持つことができます。$('#upload').click()

または、<input>ID を持つ非表示のタグを作成してから、ラベル属性をリンクに追加するだけです。

score 0 · Accepted Answer

編集:

このデモを参照してください: http://jsfiddle.net/rathoreahsan/s6Mjt/

Jクエリ:

$("#upload").click(function(){
    $("#upload-file").trigger('click');
});

HTML

<a href="javascript:void(0)" id="upload">Upload your photo</a>
<input id="upload-file" type="file"/>

CSS

#upload-file {
    display:none;
}

また

次のような便利なプラグインを使用できます。

score -3 · Accepted Answer

-3

于 2012-07-10T04:30:08.270 に答える

8 に答える 8