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

Mac OS の Chrome 26 では機能しません。

実際の問題は、フォームに統合できる「アップロード」ウィジェットの作成です。ウィジェットは 2 つの部分で構成されます。最初の部分は、開始ボタンとエラー/成功メッセージを含む div です。方法は、ファイル入力とiframeへのファイルの送信を含む2番目の部分として別のフォームを配置することだと思います。送信後、メインフォームの最初の部分の非表示フィールドに入力するか、同じエラーを表示します。

file-form を main-form に追加するのが簡単な方法ですが、禁止されています。

4

10 に答える 10

177

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 を使用しない同じ考え方 ( @Pascale の功績):

<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />
于 2013-04-25T13:22:40.230 に答える
13

完全を期すために、純粋な JavaScript での Ron van der Heijden のソリューション:

<button onclick="document.querySelector('.inputFile').click();">Select File ...</button>
<input class="inputFile" type="file" style="display: none;">
于 2016-11-14T21:07:04.147 に答える
11

HTML のみ:

<label>
  <input type="file" name="input-name" style="display: none;" />
  <span>Select file</span>
</label>

編集:私はこれを Blink でテストしていませんでした。実際には では動作しません<button>が、少なくとも最近のブラウザーでは、他のほとんどの要素で動作するはずです。

上記のコードでこのフィドルを確認してください。

于 2015-03-17T12:36:59.473 に答える