[49-8] input要素でファイルを送ってもらおう (file)

今回は、<input type="file">でファイルをアップロードするフォーム部品を作りましょう。これは以前からある値ですので、どのブラウザも対応してます。

ファイルを選択するボタンが表示され、クリックするとファイルを選択する画面が表示されます。ユーザーはここで自分のドライブに保存しているファイルを選べます。

	type属性の値	部品の役割
<input>要素で作る 「ファイルアップロード」の部品	type="file"	ファイルのアップロード

ほかの属性で機能を追加できます

この file も、type属性以外の属性を使って、さらに機能を追加できます。
（各属性については、それぞれのリンクで詳細をご覧ください。）

• accept属性で、サーバが受け入れるファイル形式を「MIMEタイプ」で指定。
  「, (カンマ) 」で複数指定可能。
  （image/*、video/*、audio/* も使えます。これはすぐ下のセクションで解説。）
• multiple属性で、ファイルの「複数」選択を可能にする
• required属性で「必須項目」にする（未記入だと送信不可のバリデート）
• autofocus属性で、HTML文書のロード後すぐに「フォーカス（記入のための選択）」する
• form属性で <form>要素の外に出してレイアウトする
• disabled属性で「使用不可」にする

<form>要素の method属性, enctype属性は必須

ファイルを送信してもらうとき、<form>要素側で、
● method属性を "post" に
● enctype属性を "multipart/form-data" に
することが必須。どっちかが抜けたらNG。コレ重要！

<form method="post" enctype="multipart/form-data">

「method="post"」は、容量の大きなデータを送信できる送信方法です。
「enctype="multipart/form-data"」はファイル送信するためのデータ形式。
詳細は「 [47] form要素で「送信先」と「送信方法」を指定しよう」をご覧ください

他に、<input type="file"> では下記の属性を使えます。

• accept属性は「MIMEタイプ」のほかに、下記の3つの値も使えます。
  image/* ←画像ファイル全般を示します。
  video/* ←動画ファイル全般
  audio/* ←音声ファイル全般
  　この3つの値も「, (カンマ) 」で区切って複数指定できます。
  「 * 」はアスタリスクという記号。「共通の、全体的な」といった意味です。
• multiple属性で、ユーザは複数のファイルを選択できます。
  Winは「Ctrl」キーを、Macは「Shift」を押しながら複数選択できます。

type="file" で「ファイル」を送信してもらおう

では、サンプルを見てみましょう。

デフォルト状態のサンプル

<input>要素には name属性で部品名をつけただけのデフォルト状態のサンプルです。
ファイル形式を絞ってないので、あらゆる形式のファイルが選択できます。
<form>要素に method="post" enctype="multipart/form-data" の指定をするのを忘れずに！

送信ファイルを選ぶ：

HTMLはこちら。

<form method="post" enctype="multipart/form-data">
  <label>送信ファイルを選ぶ：
    <input type="file" name="ex1">
  </label>
</form>

「選択...」をクリックすると、ユーザのデバイス上のファイルを選択するためのダイアログが開きます。
デフォルト（ファイル形式を絞っていない）なので、どんなファイルでも選択できるようになっています。

accept属性でファイル形式を絞ったサンプル

accept属性でファイル形式を MIMEタイプで指定します。
「,（カンマ）」で区切って複数のファイル形式を指定することもできます。

送信ファイルを選ぶ：

HTMLはこちら。

<form method="post" enctype="multipart/form-data">
  <label>送信ファイルを選ぶ：
    <input type="file" name="ex2" accept="image/png,image/gif,image/jpeg" required>
  </label>
</form>

先ほどと違って、指定したファイル形式だけが選択できるようになっています。
ファイルの誤送信を防ぐためにも便利ですね。

multiple属性で複数のファイルを送信できるように指定したサンプル

上記2つのサンプルでは、ファイルを1つしか選択することができません。
multiple属性を指定すれば、一度に複数のファイルを選択・送信できます。

また、下のサンプルでは accept属性で「image/*」を指定しています。これで画像ファイル全般を選択できるようになります。

送信ファイルを選ぶ（複数選択可）：

HTMLはこちら。

<form method="post" enctype="multipart/form-data" class="sampleform">
  <label>送信ファイルを選ぶ（複数選択可）：
    <input type="file" name="ex3" accept="image/*" multiple>
  </label>
</form>

multipleを指定したので、Winなら「Ctrl」、Macなら「Shift」キーを押しながらクリックする事で、隣接する複数のファイルを選択できます。
また「image/*」を指定したことで、画像ファイルのみ選択できる状態になっています。

ユーザが間違ったファイルを送ることがないように、accept属性でファイル形式を制限しておくほうが親切だし、受け取る方の効率もイイですね。

また、ユーザがファイルをいくつでも送信できるようにしておくのは、あんまり望ましくないです。すっごい数を送られても困るし。
そんなときは、multiple属性は取って <input type="file"> を複数配置したほうが良さそうです。

<input>要素の 索引ページ

<input>要素は「type属性の値」でいろいろなフォームの部品になります。
今回の「ファイル」の選択の部品以外は、下記の一覧をご覧ください。

• <input>要素の type属性の値一覧

<input>要素は、type属性以外にもたくさんの属性があり、それによってフォーム部品に機能などを加えられます。詳しくは下記の一覧をご覧ください。

• <input>要素の 他の属性一覧

次回予告

次回は <input type="hidden">です。
「hidden」は文字通り、隠したい部品を作ります。
ユーザーの目に触れなくても良い、フォームのコントロール用の値を送信するための部品です。