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

最終更新日:-0001年11月30日  (初回投稿日:2013年08月20日)

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

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

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

ところで、フォームの input要素のtype属性の話が長々と続いていていますが、
input要素やtype属性について「なんだっけ?」なかたは、こちらをご覧ください。
「[49-1] input要素でいろんな部品を作ろう (type属性の値一覧)」
type以外の属性についても、一覧にまとめています。
(実は、超ひさびさに投稿したので、私自身が何だかわからなくなってしまって…笑!)

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

この 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"」はファイル送信するためのデータ形式。
この2つについての詳細は「 [47] form要素で「送信先」と「送信方法」を指定しよう」をご覧ください

他に、<input type="file"> では下記のような決まりごとがあります。

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

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

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

●サンプル1
name属性で部品名をつけただけのデフォルト状態です。
<form>要素で、method="post"、enctype="multipart/form-data" にするのを忘れずに!

<form method="post" enctype="multipart/form-data">
サンプル1:<input type="file" name="ex1">
<input type="submit" value="送信">
</form>

これは Chrome (on Mac) のプレビュー。
このように「ファイルを選択」「参照…」「選択…」などのボタンがでます。ブラウザによってはテキストフィールドも表示されます。

選択ボタンをクリックすると、ハードディスク上のファイルを選択するためのダイアログが開きます。

このサンプルはデフォルト状態で、ファイル形式を絞ってないので、あらゆる形式のファイルが選択できます。
(クリックでサンプルHTMLが開きます)

●サンプル2
accept属性で3つのファイル形式(image/png, image/gif, image/jpeg)を指定しました。

<form method="post" enctype="multipart/form-data">
サンプル2:<input type="file" name="ex2" accept="image/png,image/gif,image/jpeg" required>
<input type="submit" value="送信">
</form>

accept属性に対応したブラウザなら、GIF、JPEG、PNGファイルだけが選択できるようになっています。
(クリックでサンプルHTMLが開きます)

required属性を指定しているので、ファイル選択をせずに送信ボタンを押すとアラートが出ます。
(これは Chrome (on Mac) のプレビュー)

●サンプル3
accept属性で「image/*」を指定。画像データ全般を選択できるようになります。
また、multiple属性を指定しているので、一度に複数のファイルを選択できます。

<form method="post" enctype="multipart/form-data">
サンプル3 :<input type="file" name="ex3" accept="image/*" multiple>
<input type="submit" value="送信">
</form>

BMP、GIF、JPEG、PNGといった画像ファイルだけが選択できる状態になっています。

また、multipleを指定したので、Winなら「Ctrl」、Macなら「Shift」キーを押しながらクリックする事で、複数のファイルを選択できます。
(ということを、ユーザにわかるように書いておかなきゃ意味ないですけどね)
(クリックでサンプルHTMLが開きます)

HTML5のフォームサンプル

HTML5での新要素を使ったフォームのサンプル。今回の「ファイル送信」用の部品も使っています。

クリックするとサンプルHTMLで見られます。
Sample46_HTML5のフォーム (サンプル)

次回予告

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

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.