<input>要素の"file"型

<input>要素の”file”型

フォーム内でファイルをアップロードするための入力欄を設ける際に使用されます。

属性

<input> 要素の file型 では、以下の属性が使用できます。

required

この属性を指定した場合、入力が必須となります。

value

選択されたファイルへのパスを表すテキストがvalue属性の値として送信されます。

accept

ファイル入力欄が受け付けるファイル型を定義します。カンマ区切りのテキストでファイル型を表す「拡張子」を列挙します。
例えば、画像ファイルを受け付けたい場合は、以下のように指定します。（JPEG、PNG、GIF形式を受け入れたい場合）

<input type="file" accept=".ｊｐｇ,.jpeg,.png,.gif">

PCで一般的に使用されている、ファイル種別の拡張子の他に、下記のような指定も出来ます。

• MIME タイプ文字列
• “audio/*” で任意の音声ファイル
• “video/*” で任意の動画ファイル
• “image/*” で任意の画像ファイル

capture

accept 属性で入力が画像または映像データであると示した場合、これらのデータを取り込むためにどのカメラを使用するかを指定します。
指定する内容は文字列で、”user”と指定した場合はインカメラ、”environment”とした場合、アウトカメラを使用します。
基本的には、スマホやタブレット向けの属性と言えるでしょう。

files

選択されたそれぞれのファイルを表す、JavaScriptの FileListオブジェクト です。
multiple属性がない場合は、メンバーが複数になることはありません。

multiple

この属性を指定した場合、ファイルを複数まとめて送信することが出来ます。

サンプル

See the Pen PoYdaLE by Masahiko Iwakiri (@m-iwakiri) on CodePen.