<INPUT type="file">ファイル送信フォームを作る

ファイル名を指定して、サーバーにアップロードできるファイル送信フォームを作るには、<INPUT>タグのtype属性に「file」と指定します。 そうするとファイル入力欄と参照ボタンが表示され、参照ボタンを押すとファイル選択のダイアログボックスが開き、送信するファイルを参照することができるようになります。

ただし、ファイルを送信するためには、送信先にCGIプログラムなどを設置する必要があります。

accept属性には、受信プログラムが受付可能なファイルの種類をMIMEタイプで指定して下さい。また複数の種類が受信できる場合には、それらをカンマ(,)で区切って指定するようにして下さい。 ただしこの属性は現在ほとんどサポートされていないようですので、注意して下さい。

なお<INPUT>タグのfile属性を使用する場合は、<FORM>のmethod属性に「post」、enctype属性に「multipart/form-data」を指定するようにして下さい。

使用した時の例

<form action="/cgi-bin/sample.cgi" enctype="multipart/form-data" method="post">
<p>画像を送って下さい<br />
<input type="file" name="imgfile" accept="image/jpeg,image/gif">
</p>
<p>
<input type="submit" value="送信">
</p>
</form>

ブラウザ上の表示例

画像を送って下さい

書式

  • <input type="file" name="名前" accept="MIMEタイプ"> ・・・・・・ ファイルを選択し、サーバーへ送信する

属性

name="任意の名前" フィールドに名前を付ける
size="数値" フィールドの幅を半角の桁数で指定
maxlength="" 最大入力文字数を指定

対応ブラウザなどのデータ

形式 <INPUT type="file"> 分類 インライン要素 / 置換要素
親要素 子要素にフレージングコンテンツを含める要素 子要素 なし
開始タグ 必須 終了タグ なし
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~