[解決済み] ファイル選択ダイアログをjsで開くには？

質問

$('#id').click();

Mac OS上のChrome 26では動作しません。

実はこの問題は、フォームに組み込むことができるアップロードウィジェットの作成にあります。 ウィジェットは 2 つの部分で構成されます。最初の部分は、開始ボタンとエラー/成功メッセージのあるdivです。 2番目の部分には、ファイルを入力する別のフォームを置き、iframeにファイルを送信する方法があると思います。送信後、メインフォームの最初の部分にある隠しフィールドに入力するか、同じようにエラーを表示します。

簡単な方法は、メインフォームにファイルフォームを追加することですが、それは禁止されています。

どのように解決するのですか？

jQueryを使用する

こんな感じで、ボタンと不可視の入力を作ります。

<button id="button">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

で、それをトリガーとするjQueryを追加します。

$('#button').on('click', function() {
    $('#file-input').trigger('click');
});

バニラJSの使用

同じアイデアを、jQueryを使わずに（credits to Pascale ):

<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />