基本形
ファイルアップロードは、FORM要素とINPUT要素のそれぞれで属性の設定が必要。
FORM要素は以下のように記述する。
methodはPOSTenctype属性に"multipart/form-data"を設定する
INPUT要素は以下のように記述する。
type属性を"file"に設定するmethodはPOSTname属性を設定する- この属性値で言語やフレームワークによってファイルを扱う
- 以下の例では
name属性値を"file"としている
|
1 2 3 4 |
<form action="..." method="post" enctype="multipart/form-data"> <input type="file" name="file"> <input type="submit" value="送信"> </form> |
この場合の動作は以下のとおり。
"ファイルを選択"ボタンを押すとダイアログがファイル選択ダイアログが表示される- 一度に1つのファイルを選択できる
- ファイルを選択して
"開く"ボタンを押すとファイルがアップロードされる
複数ファイルの選択
基本形ではダイアログで1つのファイルしか選択できない。複数ファイルを選択・アップロードできるようにするには、INPUT要素を以下のように記述する。FORM要素に変更はない。
type属性を"file"に設定するmethodはPOSTname属性の値の末尾に[]を付けて配列にする- 以下の例ではname属性値を
"files[]"としている
- 以下の例ではname属性値を
multiple属性を追加
|
1 2 3 4 |
<form action="..." method="post" enctype="multipart/form-data"> <input type="file" name="files[]" multiple> <input type="submit" value="送信"> </form> |
これによってファイル選択ダイアログで複数のファイルが選択・送信できるようになる。