23

重複の可能性：
Jqueryトリガーファイル入力

ユーザーがウェブサイトに画像をアップロードできるフォームを作成しています。これまでのところ、ChromeとSafariで機能するドラッグアンドドロップソリューションがあります。ただし、ユーザーがボタンをクリックして従来の方法でファイルを参照するアクションもサポートする必要があります。

これが行うことと同様に：

<input type="file" name="my_file">

ただし、不格好なファイルの説明領域と編集できない[参照]ボタンを使用するのではなく、次のようなものを使用します。

<input type="button" id="get_file">

したがって、私の質問は、このボタンでファイル選択ウィンドウを開き、選択を同じように処理する方法type="file"です。

乾杯。

私の解決策

HTML：

<input type="button" id="my-button" value="Select Files">
<input type="file" name="my_file" id="my-file">

CSS：

#my-file { visibility: hidden; }

jQuery：

$('#my-button').click(function(){
    $('#my-file').click();
});

これまでのところ、Chrome、Firefox、およびIE7 +で動作しています（IE6は試していません）。

4

2 に答える 2

34

JavaScriptを使用して、ボタン入力がクリックされたときに隠しファイル入力をトリガーできます。

http://jsfiddle.net/gregorypratt/dhyzV/-シンプル

http://jsfiddle.net/gregorypratt/dhyzV/1/-少しJQueryを使ったより魅力的な

または、ファイル入力の上に直接divのスタイルを設定pointer-eventsし、CSSでnoneに設定して、クリックイベントがファンシーdivの「背後」にあるファイル入力に渡されるようにすることもできます。ただし、これは特定のブラウザでのみ機能します。http://caniuse.com/pointer-events

于 2012-05-29T12:22:28.883 に答える
10

ユーザーがファイルを参照できるようにする場合は、を必要とinput type="file"します。要件に最も近いのはinput type="file"、ページにを配置して非表示にすることです。次に、ボタンがクリックされたときに入力のクリックイベントをトリガーします。

#myFileInput {
    display:none;
}

<input type="file" id="myFileInput" />
<input type="button"
       onclick="document.getElementById('myFileInput').click()" 
       value="Select a File" />

これが実用的なフィドルです。

注：このアプローチはお勧めしません。これinput type="file"は、ユーザーがファイルのアップロードに使用するのに慣れているメカニズムです。

于 2012-05-29T12:09:20.420 に答える