<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>썸네일 만들기</title>
<style>
.thumbnail-container {
display: inline-block;
position: relative;
}
.thumbnail-container img {
max-width: 100px;
max-height: 100px;
margin: 5px;
}
</style>
</head>
<body>
<input type="file" id="image" accept="image/*" onchange="setThumbnail(event);" class="file-input" multiple/>
<div id="image_container"></div>
<div id="selected_files"></div> <!-- 파일 이름 출력을 위한 요소 추가 -->
<script>
function setThumbnail(event) {
const imageContainer = document.querySelector("#image_container");
const selectedFilesContainer = document.querySelector("#selected_files"); // 파일 이름을 출력할 요소
for (const image of event.target.files) {
const reader = new FileReader();
reader.onload = function(event) {
const thumbnailContainer = document.createElement("div");
thumbnailContainer.classList.add("thumbnail-container");
const img = document.createElement("img");
img.setAttribute("src", event.target.result);
img.classList.add("new-img");
thumbnailContainer.appendChild(img);
imageContainer.appendChild(thumbnailContainer);
updateSelectedFilesList(); // 이미지 추가 후 파일 이름 목록 업데이트
};
reader.readAsDataURL(image);
}
function updateSelectedFilesList() {
// 선택된 파일 이름 목록 초기화
selectedFilesContainer.innerHTML = "";
// 선택된 파일 이름을 출력
for (const file of event.target.files) {
const fileName = document.createElement("p");
fileName.textContent = file.name;
selectedFilesContainer.appendChild(fileName);
}
}
}
</script>
</body>
</html>
레거시 학살자