web-dev-qa-db-ja.com

JavaScriptを使用して送信ボタンなしで「ファイル」入力を送信するにはどうすればよいですか?

「送信」ボタンをクリックせずにフォームを自動的に送信する方法はありますか?

1つの「ファイル」入力を持つフォームがあります。ユーザーが1つのファイルを選択した後、フォームを送信します。

30
Pennywise83

はい、form.submit()関数を使用できます。ファイル入力にonchangeリスナーを追加し、次のようにform.submit関数にリンクします。

<form action="upload.php" method="post">
<input type="file" onchange="this.form.submit()" name="myFile"/>
</form>
65
Marius

はい、ファイル入力のonchangeイベントに次を追加できます。

<input type='file' .... onchange='this.form.submit();'>

これにより、ユーザーがファイルを選択した直後にフォームが送信されます。ただし、ユーザーは送信前に誤った選択を修正することはできません。これが本当に賢明かどうかを必ず確認してください。

8
Pekka 웃

この解決策は私にとっては有効です。

<form enctype="multipart/form-data" method="POST" action="/upload">
  <input id="myfilefield" type="file" name="file">
  <input type="submit">
</form>

document.getElementById('myfilefield').onchange = function() {
  this.form.submit();
};

ちなみに、フラッシュを使用する必要はありません。 GmailはXHRレベル2でそれを行います。

3
cwtuan