30天做出一個線上相簿

html

yuuuun 2025-09-21 22:23:15 ‧ 113 瀏覽

分享至

Day 5 學習報告

主題:圖片上傳與即時顯示

一、學習目標

今天的目的是讓上傳的多張圖片能同時顯示在畫面上，並且每張圖片都有屬於自己的資訊卡。這樣的設計能讓線上相簿更接近真實使用情境，也方便使用者查看圖片名稱與檔案大小。

二、學習過程與方法

我先建立一個 #gallery 區塊，設定為 CSS Grid 排版，讓圖片可以自動依螢幕大小排列。接著使用 JavaScript 的 FileReader() 讀取使用者選擇的多張圖片，為每張圖片建立一個 photo-card 卡片元素，內含圖片與資訊文字。

三、實作成果

完成後的介面能一次上傳多張圖片，系統會自動生成相簿卡片，每張卡都有檔名與大小說明。版面排列整齊且支援自動換行，整體相簿變得更有系統性與可讀性。

四、主要程式碼區塊

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Day5 - 相簿展示與多圖片上傳</title>

  <style>
    /*主題樣式統一變數*/
    :root {
      --bg: #ffffff;
      --primary: darkorange;
      --accent: coral;
      --text: #333;
      --muted: #777;
      --border: #e6e6e6;
      --btn: #ff8c42;
      --btn-hover: #ff6a00;
      --card-bg: #fff;
    }

    /*全域網頁風格*/
    body {
      background-color: var(--bg);
      font-family: "Microsoft JhengHei", Arial, sans-serif;
      margin: 20px;
      text-align: center;
      color: var(--text);
    }

    h1 {
      color: var(--primary);
    }

    p {
      color: var(--accent);
      font-size: 18px;
    }

    /*上傳按鈕設定*/
    input[type="file"] {
      margin: 15px 0;
      padding: 8px;
      border-radius: 6px;
      border: 1px solid var(--border);
      font-size: 16px;
      cursor: pointer;
    }

    /*相簿展示區*/
    #gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    /*單張圖片卡片樣式*/
    .photo-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .photo-card img {
      width: 100%;
      border-radius: 10px;
      border: 2px solid #ddd;
    }

    .info {
      font-size: 14px;
      color: var(--muted);
      margin-top: 8px;
      line-height: 1.5;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }
  </style>
</head>

<body>
  <h1>我的線上相簿</h1>
  <p>Day5：支援多圖片上傳，自動顯示於相簿展示區，並顯示檔名與大小</p>

  <!--圖片上傳區-->
  <input type="file" id="upload" accept="image/*" multiple>

  <!--相簿展示區 -->
  <div id="gallery"></div>

  <script>
    const upload = document.getElementById("upload");
    const gallery = document.getElementById("gallery");

    // 當使用者上傳圖片時觸發
    upload.addEventListener("change", function() {
      gallery.innerHTML = ""; // 清空舊相片內容

      Array.from(this.files).forEach(file => {
        const reader = new FileReader();

        reader.onload = function(e) {
          // 建立圖片容器
          const card = document.createElement("div");
          card.classList.add("photo-card");

          // 建立圖片元素
          const img = document.createElement("img");
          img.src = e.target.result;

          // 若檔名過長，自動截斷顯示
          const shortName = file.name.length > 25 ? file.name.slice(0, 25) + "..." : file.name;

          // 顯示圖片資訊
          const info = document.createElement("p");
          info.classList.add("info");
          info.textContent = `檔名: ${shortName} ｜ 大小: ${(file.size / 1024).toFixed(1)} KB`;

          // 將圖片與文字加進卡片
          card.appendChild(img);
          card.appendChild(info);

          // 加入相簿區
          gallery.appendChild(card);
        };

        reader.readAsDataURL(file);
      });
    });

    console.log("✅ Day5：相簿展示與多圖片上傳完成");
  </script>
</body>
</html>