Web制作メモ -トップへ-

[jQuery] ファイルを選択したと同時にアップロード

JavaScript2014.12.08 07:52

ファイルを選択したと同時に送信するにはonChangeイベントを使います。

通常、まずファイルを選択して次に送信ボタンを押してファイルを送信するという流れですが、これで送信ボタンを押す手間が省けます。

ファイルが選択されたらJavascriptでsubmit()

<form method="post" action="" enctype="multipart/form-data" id="form">
<input type="file" name="file01" onChange="$(‘#form1′).submit();">
</form>

ファイルをアップロードするformはenctype="multipart/form-data"を指定しmethodをpostにします。

actionを空欄にすると自分自身に返ってきます。別のURLにpostしたいときには別のURLを指定します。

input type="file"でファイルを選択ボタンが表示されます。

name属性はファイルを取り出す際の目印になります。例えば、PHPでアップロードされたファイルを取り出す時、$_FILES["file01(name属性で指定した値)"]の中に格納されます。

onChangeは状態が変化した際に実行されます。ここでフォームを指定してsubmit()すれば自動的にアップロード出来ます。