📷 画像プレビュー付きファイルアップロード

👇 こういうやつ 👇

👀 実行デモ

<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault()">
  <p>画像を選択してください：</p>
  <input type="file" accept="image/*" onchange="previewImage(event)">
  <div style="margin-top: 1em;">
    <img id="imagePreview" src="#" alt="プレビュー画像" style="display:none; max-width:100%;">
  </div>
  <button type="submit" style="margin-top: 1em;">📤 送信</button>
</form>

<script>
function previewImage(event) {
  const img = document.getElementById("imagePreview");
  img.src = URL.createObjectURL(event.target.files[0]);
  img.style.display = "block";
}
</script>

📌 フォーム属性の意味と使い方

① action="upload.php"
フォームを送信したときに,データを送る送信先URLを指定します。

<form action="upload.php" ...>

補足： upload.php を自作して画像をサーバーに保存したり,外部サービス（例：Amazon S3,Google Drive APIなど）のURLにして送信することも可能です。

② enctype="multipart/form-data"
フォームで画像ファイルなどのバイナリデータを送信するためのエンコード指定です。

<form enctype="multipart/form-data" ...>

使わないと： 画像などのファイルがサーバーに正しく送れません（空になる or 無効になる）。

③ onsubmit="event.preventDefault()"
フォームを送っても実際にはサーバーに送信されないようにする（デモ・プレビュー目的）。

<form onsubmit="event.preventDefault()" ...>

実務で送信したいとき： onsubmit は削除するか,JavaScript内で form.submit() を使って明示的に送信処理を行います。

🧪 実例まとめ（全部入り）

<form action="upload.php" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault()">

✅ このテンプレートの用途・メリット

画像を選ぶだけですぐプレビュー確認できる
ユーザーに直感的な操作体験を提供
アップロードUIに簡単追加可能
ポートフォリオ・商品画像登録などで便利
JS初心者でも理解しやすい構成

🧩 応用と活用方法

画像プレビュー機能は、ECサイトやプロフィール作成ページなどでユーザー体験を高める定番の仕組みです。画像を選んだ瞬間に表示されることで、ミスアップロードの防止にも役立ちます。

今回のテンプレートでは、URL.createObjectURL() を活用して選択された画像ファイルの一時的な表示URLを生成しています。これにより、サーバーにアップロードせずとも即時にプレビュー可能となっています。

また、img.style.display = "block" を組み合わせることで、選択されたときのみ画像を表示させる簡易な表示制御も実現しています。

なお、画像のサイズ制限やファイル形式のバリデーションを追加したい場合は、event.target.files[0].type や .size プロパティをチェックしてカスタマイズすると良いでしょう。

このような基本構成に慣れておくことで、後に複数画像のプレビューやドラッグ＆ドロップ対応への拡張もスムーズに行えるようになります。