SQL見るだけクエリ#274 PHP 画像をアップロードするためのページに関して

PHP 画像をアップロードするためのページに関して解説をしてみようと思います。

この記事を読むと（約5分）
PHP 画像をアップロードするためのページに関してイメージできます。

PHP 画像をアップロードする際のプレビュー

以下のHTMLコードは、画像をアップロードするためのページを作成しています。

これは、ファイルが選択された際にプレビューを更新するためのコードです。
具体的には、ファイルが選択されると、そのファイルを読み込み、その内容をプレビューとして表示します。

簡単に言うと、このページはユーザーが画像を選択し、
その画像をプレビューで見ることができるシンプルな画像アップロードフォームを提供しています。

<!DOCTYPE html>
<html>
<head>
  <title>管理画面</title>
</head>
<body>
  <h1>画像アップロード</h1>
  <form enctype="multipart/form-data" action="/upload" method="post">
      <input type="file" name="image" id="imageInput" accept="image/*">
  </form>
  <div id="imagePreview"></div>

  <script>
    document.getElementById('imageInput').addEventListener('change', function() {
      var preview = document.getElementById('imagePreview');
      var file = this.files[0];
      var reader = new FileReader();

      reader.onload = function() {
        var img = new Image();
        img.src = reader.result;
        img.style.maxWidth = '300px';
        img.style.maxHeight = '300px';
        preview.innerHTML = '';
        preview.appendChild(img);
      }

      if(file) {
          reader.readAsDataURL(file);
      }
    });
  </script>
</body>

具体的には、以下の要素が含まれています：

ページ内に「画像アップロード」という見出し（h1要素）があります。
ファイルをアップロードするフォームがあります。このフォームは「/upload」というURLにデータを送信します。
フォーム内にはファイル選択フィールドがあり、選択されたファイルは「image」という名前で識別されます。
ファイル選択フィールドには、画像のみが選択可能なように設定されています。
ファイルを選択すると、そのプレビューが表示されるための空の`<div>`要素があります。
JavaScriptが使われています。