ファイルを選択した時に自動でsubmitを行う
概要
よくあるフォームでは、ファイル選択ボタンをクリック→ファイルを選択→送信ボタンをクリック→ファイルを送信という処理を行うことが多いと思います。 今回はファイル選択ボタンをクリック→ファイルを選択→ファイルを送信という処理を行ってみました。
原型
See the Pen Automatically upload file on file selection by ryu022304 (@ryu022304) on CodePen.
$(this).val('')で値を初期化しなかった場合、confirmで一度アップロードをキャンセルし、再度同じファイルを選択した時にchangeイベントが発火しませんので注意が必要です。
Bootstrapを利用
Bootstrapを使ってボタンをそれっぽくすると以下のように出来ます。
See the Pen Automatically upload file on file selection by bootstrap by ryu022304 (@ryu022304) on CodePen.
まとめ
onclickで行けるかと思ったが上手く行かなかったので、調べてみたらonchangeを使おうという話だった。
