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

最終更新日:2018年01月31日  (初回投稿日:2013年08月20日)

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.