一、學習目標
今天的主要目標是讓相簿能夠支援「圖片分類」的功能。這樣使用者在上傳照片時，可以選擇不同的分類（例如：旅遊、生活、寵物），系統會自動幫忙歸類，讓相簿變得更有組織、更方便瀏覽。這也是往多功能相簿邁進的重要一步，為之後的搜尋、排序和資料儲存打下基礎。
二、學習過程與方法
我在設計這個功能的時候，首先在HTML中新增了一個 <select> 下拉選單，讓使用者可以在上傳前先選擇分類。接著在JavaScript裡面，當每張圖片上傳時，就把選擇的分類一併記錄到物件中。
為了讓分類更清楚，我也在每張圖片上方加了一個小標籤（tag），使用 CSS 讓它固定顯示在圖片左上角，呈現出顏色鮮明的小標題效果。這樣一來，不僅可以直觀地看到圖片屬於哪一類，整體版面也更加美觀。
三、實作成果
最終完成的成果是一個可以自動分類顯示的相簿系統。當使用者選擇分類後上傳，圖片會被即時顯示並標上對應標籤，例如「旅遊」或「寵物」。整個流程都不需要重新整理頁面，讓操作體驗更順暢。這個功能的加入讓相簿不再只是單純的圖片集合，而是開始有結構化的分類邏輯，也為未來的搜尋功能提供了基礎。
四、主要程式碼區塊
yuuuun
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Day11 – 相簿分類功能</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);
}
select, input[type="file"] {
margin: 10px;
padding: 8px 15px;
border-radius: 8px;
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 {
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);
position: relative;
transition: 0.3s;
}
.photo-card:hover {
transform: translateY(-3px);
}
.photo-card img {
width: 100%;
border-radius: 10px;
border: 2px solid #ddd;
}
/* 圖片資訊樣式 */
.info {
font-size: 14px;
color: var(--text);
margin-top: 8px;
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: anywhere;
}
/* 分類標籤 */
.category-tag {
background: var(--accent);
color: white;
border-radius: 5px;
padding: 3px 8px;
font-size: 12px;
position: absolute;
top: 8px;
left: 8px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<h1>我的線上相簿</h1>
<p>Day11：上傳圖片並選擇分類（旅遊 / 生活 / 寵物）</p>
<!-- 分類選擇 -->
<label for="category">選擇分類：</label>
<select id="category">
<option value="旅遊"> 旅遊</option>
<option value="生活"> 生活</option>
<option value="寵物"> 寵物</option>
</select>
<!-- 圖片上傳 -->
<input type="file" id="upload" accept="image/*" multiple>
<!-- 相簿展示區 -->
<div id="gallery"></div>
<script>
const upload = document.getElementById("upload");
const gallery = document.getElementById("gallery");
const categorySelect = document.getElementById("category");
let photos = [];
// 上傳圖片
upload.addEventListener("change", function() {
const category = categorySelect.value; // 取得分類
Array.from(this.files).forEach(file => {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const photoData = {
category: category,
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 => {
const card = document.createElement("div");
card.classList.add("photo-card");
// 分類標籤
const tag = document.createElement("div");
tag.classList.add("category-tag");
tag.textContent = photo.category;
// 圖片
const img = document.createElement("img");
img.src = photo.src;
// 圖片資訊
const info = document.createElement("p");
info.classList.add("info");
const shortName = photo.name.length > 25 ? photo.name.slice(0, 25) + "..." : photo.name;
info.textContent = `分類: ${photo.category} ｜ 檔名: ${shortName} ｜ 大小: ${photo.size} KB ｜ 尺寸: ${photo.width}x${photo.height}`;
card.appendChild(tag);
card.appendChild(img);
card.appendChild(info);
gallery.appendChild(card);
});
}
console.log("Day11：分類功能完成");
</script>
</body>
</html>
iThome鐵人賽
看影片追技術