input type=file : ファイル選択

カテゴリ

デモ

<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
↑この領域は編集できます(シンタックスハイライトは同期しません)。

説明

ファイルを送信する場合は、 フォーム送信メソッド(フォーム部品のformmethod属性かformのmethod属性)をpostに、 エンコード種別(フォーム部品のformenctype属性かformのenctype属性)をmultipart/form-dataにする必要がある。

属性 属性値の見方

accept  変更[MIMEタイプ]|(audio|video|image)/\*|\.[拡張子](,[MIMEタイプ]|(audio|video|image)/\*|\.[拡張子])*edge
可能なファイルの種類を指定。拡張子とMIMEタイプをセットで指定するのがベター。例えばJPEG画像の場合はimage/jpeg,.jpg,.jpeg、テキストファイルの場合はtext/plain,.txtといった具合。

これらは飽くまでユーザーに対するヒントで、ユーザーは「すべてのファイル」のような項目に切り替えて任意のファイルを選択する事ができる。

HTML5ではaudio/*video/*image/*が新たに追加された。それぞれ、任意の音声、動画、画像を示す。

性質上、モバイルブラウザではあまり対応されていないが、video/*image/*を指定すると、カメラアクセスを求められ、その場で動画や画像を撮影して投稿できたりする。また、audio/*を指定すると、マイクへのアクセスを求められ、録音できたりする。

capture  未来(空欄)|user|environmentandroid
マイクやカメラを利用してaccept属性に応じたキャプチャを取得する。Media Capture
  • user: インカメラ
  • environment: アウトカメラ
現在iOS版Safariのオレ仕様だが、今後他のブラウザにも展開されるかも。
multiple  new(真偽値)
複数選択できるようになる。
required  new(真偽値)
そのフィールドを入力必須にする。
autofocus  new(真偽値)ie
ページロード時、ダイアログ表示時に自動でその要素にフォーカスする。
disabled(真偽値)
そのフィールドを無効にする。値も送信されない。類似の属性にreadonlyがあるが、こちらは編集はできないが選択でき、値も送信される。
form  new[ID]ie
関連付けるformのid属性の値を指定(name属性ではなく)。無い場合は親になっているform要素に関連付けられる。
name[文字列]
そのフィールドの名前。name属性とvalue属性のペアでサーバーに送信される。
type  変更[列挙型]
デフォルトはtext
  • hidden: 隠しフィールド。固定値を送信したい場合に利用。
  • text: テキスト入力欄かコンボボックス。
  • search new: 検索フィールドかコンボボックス。
  • tel new: テキスト入力欄かコンボボックス。
  • url new: テキスト入力欄かコンボボックス。
  • email new: テキスト入力欄かコンボボックス。
  • password: ブラインドされたテキスト入力欄。
  • date new: 日付コントロール。
  • month new: 月コントロール。
  • week new: 週コントロール。
  • time new: 時間コントロール。
  • datetime-local new: 日時コントロール。
  • number new: テキスト入力欄かコンボボックスかスピナー。
  • range new: スライダーかそれに類似のコントロール。
  • color new: カラーピッカー。
  • checkbox: チェックボックス。
  • radio: ラジオボタン。
  • file: ファイルアップロードフォーム。
  • submit: 送信ボタン。
  • image: 画像ボタン。
  • reset: リセットボタン。関連付けられたリセット可能なフォーム部品がリセットされる。
  • button: 何の変哲もないボタン。