<input type="file">
<input type="file"> は、アップロードするファイルを選択するための input のタイプです。 FORM で使用します。
この <input type="file"> はファイルを選択し取得する機能を提供します。FORMとして送信することでファイルがサーバーにアップロードされます。
ファイルの送信においては、FORMを method="POST"、 enctype="multipart/form-data" にする必要があります。
<label>ファイル : <input name="val_datetime-local" type="file" value="" /></label>
<label>エレメントによって項目名や説明を付けることができます。
- ad -
属性
グローバル属性も持ちます。以下に主な属性のみを示します。
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 -