<input type="file">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類
要素

input要素type="file" を指定すると、ファイルをアップロードするための入力欄を作成することができます。

  • SafariとChromeでは、入力欄の代わりにテキストが表示されます。

<input type="file" name="example" size="30">

属性 説明
type="" file ファイルの送信欄を作成
name="" 文字列 部品の名前を指定
size="" 文字数 入力欄の幅を文字数で指定

type="file" (ファイルの送信欄を作成)

type属性の値に file を指定すると、ファイルの送信欄を作成できます。

name="" (部品の名前を指定)

フォーム部品を識別するための名前を指定します。

この属性の値は、ファイルデータとセットで送信されることになります。

size="" (入力欄の幅を文字数で指定)

入力欄の横幅を文字数で指定します。

この属性を指定した場合でも、ブラウザにより見た目の幅は異なります。同じような幅で表示させたい場合は、スタイルシートで指定します。

  • SafariとChromeでは、この指定内容は反映されません。(入力欄が表示されないため)

使用方法

type="file" を指定すると、自動的に参照...(またはファイルを選択)と書かれたボタンが表示されます。

参照ボタンをクリックすると、ファイルを選択するためのダイアログが表示され、選択を完了するとそのファイルへのパスが入力欄に挿入されます。(SafariとChromeの場合は多少異なります)

  • ファイルを送信するフォームでは、enctype属性multipart/form-data を指定しておく必要があります。
  • 送信されたファイルをサーバー側で受信するには、その機能を持ったCGI等のプログラムが必要になります。

その他の属性

以下の属性で、部品の無効化を指定することができます。(主に、JavaScript等と組み合わせて使用することになります)

属性 説明
disabled 値は不要 部品を無効化する

disabled (部品を無効化する)

この属性が指定された部品は、選択や書き換えができなくなり、データも送信されなくなります。

使用例


<form method="post" action="example.cgi" enctype="multipart/form-data">

<p>デフォルト<br>
<input type="file" name="example1"></p>

<p>幅を指定<br>
<input type="file" name="example2" size="30"></p>

<p>部品を無効化する<br>
<input type="file" name="example3" size="30" disabled></p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

デフォルト

幅を指定

部品を無効化する

  • サンプルのため送信できません。