30天做出一個線上相簿

html

yuuuun 2025-10-16 01:03:27 ‧ 77 瀏覽

分享至

Day 9 學習報告

主題：圖片重新選擇功能

一、學習目標

今天的目標是讓使用者能夠「重新選擇圖片」──也就是在上傳錯誤或不滿意圖片時，可以再次挑選新檔案覆蓋原圖。這樣的功能讓整個相簿系統更靈活，也符合實際使用中「更換照片」的需求，提升整體操作體驗。

二、學習過程與方法

在實作上，我先保留原本的上傳邏輯，並新增一個「重新選擇」按鈕，當使用者點擊後會觸發隱藏的 <input type="file"> 重新選擇圖片。新的圖片會透過 FileReader 即時讀取並更新 img.src，同時覆蓋原本的內容。這樣使用者不用刪除舊圖，就能直接替換成新圖片。

三、實作成果

相簿中的每張圖片左上角都會出現分類標籤，方便區分不同主題。整體設計更有系統性，也為後續的搜尋功能鋪路。

四、主要程式碼區塊

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Day9 – 圖片重新選擇功能</title>
  <style>
    :root {
      --bg: #ffffff;
      --primary: darkorange;
      --accent: coral;
      --text: #333;
      --muted: #777;
      --border: #e6e6e6;
      --btn: #ff8c42;
      --btn-hover: #ff6a00;
      --card-bg: #fff;
    }

    body {
      font-family: "Microsoft JhengHei", Arial, sans-serif;
      background-color: var(--bg);
      margin: 20px;
      text-align: center;
    }

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

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

    input[type="file"] {
      margin: 15px;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      cursor: pointer;
    }

    #gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .photo-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      background: var(--card-bg);
      text-align: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

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

    .info {
      font-size: 14px;
      color: var(--text);
      margin-top: 8px;
      word-wrap: break-word;
      overflow-wrap: anywhere;
      line-height: 1.5;
    }

    .replace-btn {
      background: var(--btn);
      color: white;
      padding: 6px 12px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-top: 6px;
      font-size: 14px;
      transition: 0.3s;
    }

    .replace-btn:hover {
      background: var(--btn-hover);
    }
  </style>
</head>
<body>
  <h1>我的線上相簿</h1>
  <p>Day9：支援圖片重新選擇與替換功能</p>

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

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

  <script>
    const upload = document.getElementById("upload");
    const gallery = document.getElementById("gallery");
    let photos = [];

    // 上傳圖片
    upload.addEventListener("change", function() {
      Array.from(this.files).forEach(file => {
        const reader = new FileReader();
        reader.onload = function(e) {
          const img = new Image();
          img.onload = function() {
            const photoData = {
              name: file.name,
              size: (file.size / 1024).toFixed(1),
              width: img.width,
              height: img.height,
              src: e.target.result
            };
            photos.push(photoData);
            renderGallery();
          };
          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      });
    });

    // 渲染圖片相簿
    function renderGallery() {
      gallery.innerHTML = "";
      photos.forEach((photo, index) => {
        const card = document.createElement("div");
        card.classList.add("photo-card");

        const img = document.createElement("img");
        img.src = photo.src;

        const info = document.createElement("p");
        info.classList.add("info");
        info.textContent = `檔名: ${photo.name} ｜ 大小: ${photo.size} KB ｜ 尺寸: ${photo.width}x${photo.height}`;

        // 重新選擇按鈕
        const replaceBtn = document.createElement("button");
        replaceBtn.classList.add("replace-btn");
        replaceBtn.textContent = "重新選擇圖片";
        replaceBtn.addEventListener("click", () => replaceImage(index));

        card.appendChild(img);
        card.appendChild(info);
        card.appendChild(replaceBtn);
        gallery.appendChild(card);
      });
    }

    // 替換圖片功能
    function replaceImage(index) {
      const input = document.createElement("input");
      input.type = "file";
      input.accept = "image/*";
      input.addEventListener("change", function() {
        const file = this.files[0];
        const reader = new FileReader();
        reader.onload = function(e) {
          const img = new Image();
          img.onload = function() {
            photos[index] = {
              name: file.name,
              size: (file.size / 1024).toFixed(1),
              width: img.width,
              height: img.height,
              src: e.target.result
            };
            renderGallery();
          };
          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      });
      input.click();
    }

    console.log("Day9：圖片重新選擇與替換功能完成");
  </script>
</body>
</html>