一、學習目標
今天的主要目的是讓線上相簿具備「圖片刪除功能」。在前幾天的開發中，已完成上傳、預覽與分類等核心功能，但還缺少一個讓使用者能夠手動移除不需要圖片的機制。這個功能的實現不僅能提高使用體驗，也能為後續的LocalStorage整合與資料管理打下基礎。
二、學習過程與方法
在開發過程中，我首先分析相簿中每張圖片的生成結構，並思考如何針對個別卡片加入刪除按鈕。接著我在每張圖片的資訊區塊下方新增一個「刪除」按鈕，透過JavaScript為每個按鈕綁定addEventListener。當使用者點擊刪除時，系統會從photos陣列中移除對應的項目，並即時重新渲染畫面，確保介面同步更新。
三、實作成果
完成後，使用者可在相簿中刪除任意一張圖片。此功能的反應速度良好，不需重新整理頁面即可即時生效。此外，程式結構保留彈性，可在後續擴充成與LocalStorage同步的版本，確保刪除後的資料不會再次載入。整體而言，這一天的成果讓相簿更接近真實可用的應用系統。
四、主要程式碼區塊
yuuuun
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Day10 – 刪除圖片功能</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);
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;
word-wrap: break-word;
overflow-wrap: anywhere;
line-height: 1.5;
}
/* 刪除按鈕 */
.delete-btn {
background: crimson;
color: white;
padding: 6px 12px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 6px;
font-size: 14px;
transition: 0.3s;
}
.delete-btn:hover {
background: darkred;
}
</style>
</head>
<body>
<h1>我的線上相簿</h1>
<p>Day10：新增刪除圖片功能</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 delBtn = document.createElement("button");
delBtn.classList.add("delete-btn");
delBtn.textContent = "🗑 刪除圖片";
delBtn.addEventListener("click", () => deleteImage(index));
card.appendChild(img);
card.appendChild(info);
card.appendChild(delBtn);
gallery.appendChild(card);
});
}
// 刪除圖片
function deleteImage(index) {
if (confirm("確定要刪除此圖片嗎？")) {
photos.splice(index, 1); // 從陣列中移除
renderGallery(); // 重新渲染畫面
}
}
console.log("Day10：刪除圖片功能完成");
</script>
</body>
</html>
iThome鐵人賽
看影片追技術