web-dev-qa-db-ja.com

入力ボタンをファイル選択ウィンドウにリンクする方法は？

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

ユーザーが画像をWebサイトにアップロードできるフォームを作成しています。これまでのところ、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を試したことはありません）。

javascriptjqueryhtmlformsfile-upload
15
diggersworld

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

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

http://jsfiddle.net/gregorypratt/dhyzV/1/ -少しJQueryを使いこなす

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

21
Greg

ユーザーがファイルを参照できるようにする場合は、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"は、ユーザーがファイルのアップロードに使用することに慣れているメカニズムです。

6
James Hill