HTML | 画像ファイルを添付するフォームのサンプルコード
画像ファイルを添付するフォームのHTMLサンプルコードと表示例の紹介になります。
画像ファイルを添付するフォームのサンプル
HTMLで画像ファイルを添付するフォームを設置する際のサンプルコードです。
フォームでファイルを添付する場合、<form>タグに「enctype」タグで「multipart/form-data」を指定します。
<input>タグの「type」属性で「file」を指定する事で、一般的なファイル添付のフォームパーツとなります。
サンプルコードでは「accept」属性にて添付可能なファイルタイプを指定しています。
※ 複数指定はChromeでは現在未対応のようですので、別途送信先やJavaScriptでの判定が必要です。
<form action="" method="POST" enctype="multipart/form-data">
<p><input type="file" name="image" accept=".jpg, .jpeg, .png, .gif"></p>
<p><input type="submit" id="submit" value="送信" /></p>
</form>以下は上記フォームのHTMLを実際に設置した結果になります。
スタイル・デザインは変更を加えていないため、サイトの設定が反映されています。
複数のファイルを送信する場合は「name」属性の値を配列のように記述する事で、すべて送信可能になります。
この方法で複数の画像をフォームから送信した場合の受け取り方については以下のページを参照して下さい。
関連：PHP | HTMLフォームでの画像のPOST送信と受け取り方法 | ONE NOTES
<form action="" method="POST" enctype="multipart/form-data">
<p><input type="file" name="image[]" accept=".jpg, .jpeg, .png, .gif"></p>
<p><input type="file" name="image[]" accept=".jpg, .jpeg, .png, .gif"></p>
<p><input type="file" name="image[]" accept=".jpg, .jpeg, .png, .gif"></p>
<p><input type="submit" id="submit" value="送信" /></p>
</form>