備忘録的プログラミングリファレンス

<input type="file">

 <input type="file"> は、アップロードするファイルを選択するための input のタイプです。 FORM で使用します。
 この <input type="file"> はファイルを選択し取得する機能を提供します。FORMとして送信することでファイルがサーバーにアップロードされます。

 ファイルの送信においては、FORMを method="POST"、 enctype="multipart/form-data" にする必要があります。

<input type="file">
<label>ファイル : <input name="val_datetime-local" type="file" value="" /></label>
	
表示例

 <label>エレメントによって項目名や説明を付けることができます。

- ad -

属性

 グローバル属性も持ちます。以下に主な属性のみを示します。

AttributeValueExtra information
name *必須。タグエレメントを特定するための属性です。
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
type 扱うデータタイプまたはinputタグの形状
accept 受け付けるファイル形式。以下の accept 属性についてを参照のこと
capture 画像や動画ファイルをカメラなどの外部デバイスから取り込むかを指定。
multiple 複数のファイルを扱い時はこのパラメーターを指定する必要がある。
files 複数のファイルをFileListオブジェクトで指定。multiple指定が必要。*ここでは扱いません

<label>


ブラウザでの見え方

accept 属性について

 accept 属性は予め選択できるファイルを指定します。MIME タイプ、拡張子、指定ディレクトリで予め限定することができます。この限定要素は複数指定することもできます。

MIME タイプ

 データの種類と形式を表し、タイプ名/サブタイプで指定します。
 タイプ名はデータの種類を表し、text(テキスト)image(画像)video(動画)audio(音声)application(アプリケーション固有)message(メール)multipart(複数形式)があります。
 サブタイプはデータ形式を表し、プレーンテキストはtext/plain、HTML はtext/html、png はimage/pngなどと表します。

拡張子

 拡張子は.txt.html.pngといったファイルの最後に付加されたデータ形式を表すものです。Windows では拡張子が見えないかもしれません。その場合は見えるように設定しておく必要があるかもしれません。

ディレクトリで指定

 ディレクトリを指定することで選択できる範囲を決めることができます。image/*とするとimage/ディレクトリ以下のファイルのみと限定することができます。

 以上の MIME タイプ、拡張子、指定ディレクトリは,(カンマ)で区切って複数指定することができます。

関連typeについて

  • button... 汎用ボタン。scriptに利用する
  • checkbox... 複数選択が可能。選択済みにするにはcheckedパラメータを追記する
  • color... カラーピッカー。色選択に使用します。
  • date... 日付け
  • datetime-local... 日付けと時刻(ローカルタイムゾーン)
  • email... emailアドレス
  • file... ファイルのアップロード
  • hidden... 画面に表示しないがサーバーに送信するデータ
  • image... 任意の画像を利用したカスタム用ボタン
  • month... 年度と月度
  • number... 数値
  • password... パスワード入力
  • radio... 選択肢が必要な場合
  • range... 調整バーによる数値入力
  • reset... リセットボタン。入力データをクリア
  • search... 検索用
  • submit... 送信ボタン
  • tel... 電話番号
  • text... テキスト入力。改行を含む場合は<textarea>を
  • time... 時刻
  • url... URL
  • week... 年度の第何週目か

- ad -