728x90
목록 나열하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
</head>
<body>
<input type="file" id="file_input" webkitdirectory>
<div class="file_list_container"></div>
</body>
<script>
const fileInput = document.querySelector('#file_input');
const fileListContainer = document.querySelector('.file_list_container');
fileInput.addEventListener('change', displaySelectedDirectories);
function displaySelectedDirectories() {
const selectedDirectories = fileInput.files;
// 그룹화된 파일을 저장할 객체 생성
const filesByDirectory = {};
// 선택한 디렉터리 내의 파일을 그룹화
for (const file of selectedDirectories) {
const directoryPath = file.webkitRelativePath.split('/').slice(1, -1).join('/'); // 디렉터리 경로 추출
if (!filesByDirectory[directoryPath]) {
filesByDirectory[directoryPath] = [];
}
filesByDirectory[directoryPath].push(file);
}
// 파일을 그룹화된 디렉터리별로 나열
const directoryList = document.createElement('ul');
fileListContainer.appendChild(directoryList);
for (const directoryPath in filesByDirectory) {
const directoryItem = document.createElement('li');
const directoryName = document.createElement('div');
directoryName.textContent = directoryPath;
directoryItem.appendChild(directoryName);
const fileList = document.createElement('ul');
for (const file of filesByDirectory[directoryPath]) {
const fileItem = document.createElement('li');
const fileName = document.createElement('div');
fileName.textContent = file.name;
fileItem.appendChild(fileName);
fileList.appendChild(fileItem);
}
directoryItem.appendChild(fileList);
directoryList.appendChild(directoryItem);
}
}
</script>
</html>폴더를 업로드하면
• 하위폴더1
◦ /파일이름1
◦ /파일이름2
◦ /파일이름3
• 하위폴더2
◦ /파일이름1
◦ /파일이름2
이렇게 나열됩니다.
여기서 조금더 심화하면 이미지 파일을 나열하는 목록을 만들 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폴더별 이미지 및 하위 폴더 목록</title>
<style>
.folder-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.folder-item {
display: inline-block;
margin: 10px;
width: 200px; /* 원하는 폴더 요소의 가로 크기 지정 */
text-align: center; /* 내용 가운데 정렬 */
/* 다음 두 속성을 추가하여 텍스트 오버플로우가 발생할 경우 "..."으로 표시 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.folder-image {
max-width: 100%;
max-height: 100px;
width: auto;
height: auto;
}
.folder-name {
display: inline-block; /* 폴더 요소를 가로로 나열 */
margin: 10px; /* 폴더 요소 간 간격 설정 */
}
.pagenum {
display: inline-block;
}
.image_display {
display: flex;
flex-direction: column;
align-items: center;
}
img {
max-width: 100%;
max-height: 100vh;
width: auto;
height: auto;
}
.folder_list img {
max-height: 100px;
}
</style>
</head>
<body>
<input type="file" id="directory_upload" webkitdirectory>
<div class="folder_list"></div>
<div class="pagenum" id="page_num"></div>
<div class="image_display"></div>
</body>
<script>
const input = document.querySelector('input');
const folderList = document.querySelector('.folder_list');
const imageDisplay = document.querySelector('.image_display');
const pageNumContainer = document.getElementById('page_num');
// 폴더를 그룹화하기 위한 Map 생성
const folderMap = new Map();
let page = 1;
const page_max_num = 10; // 한 페이지에 표시될 최대 항목 수
let page_max; // 전체 페이지 수를 저장할 변수
input.addEventListener('change', showFolderList);
function showFolderList() {
const selectedFiles = input.files;
for (const file of selectedFiles) {
const folderPath = file.webkitRelativePath.split('/'); // 경로 분할
// 파일이 속한 폴더 경로 (마지막 요소는 파일 이름)
const folderName = folderPath.slice(1, -1).join('/');
// 해당 폴더를 Map에 추가하고, 파일 또는 폴더를 그 폴더에 추가
if (!folderMap.has(folderName)) {
folderMap.set(folderName, []);
}
folderMap.get(folderName).push(file);
}
// 페이지 번호 업데이트
updatePageNumbers();
}
// 선택한 폴더의 이미지를 표시
function showImageList(folderName) {
imageDisplay.innerHTML = ''; // 두 번째 영역 초기화
// 폴더맵에서 해당 폴더의 파일 목록 가져오기
const files = folderMap.get(folderName);
if (files) {
files.forEach(file => {
if (file.type.startsWith('image/')) {
// 이미지 파일인 경우에만 표시
const image = document.createElement('img');
image.src = URL.createObjectURL(file);
imageDisplay.appendChild(image);
}
});
}
}
// 함수 추가: 폴더의 첫 번째 이미지 URL 가져오기
function getFirstImageURL(folderName) {
const files = folderMap.get(folderName);
if (files) {
for (const file of files) {
if (file.type.startsWith('image/')) {
return URL.createObjectURL(file);
}
}
}
return null;
}
// 함수 수정: updatePageNumbers 함수
function updatePageNumbers() {
const folderKeys = Array.from(folderMap.keys()).reverse();
page_max = Math.ceil(folderKeys.length / page_max_num);
let html = '';
// 페이지 번호 생성
for (let i = 1; i <= page_max; i++) {
html += `<div class="pagenum ${i === page ? 'current' : ''}" onclick="goToPage(${i})">${i}</div>`;
}
// 페이지 번호 출력
pageNumContainer.innerHTML = html;
// 현재 페이지에 해당하는 폴더 목록 가져오기
const foldersInPage = folderKeys.slice((page - 1) * page_max_num, page * page_max_num);
// 폴더 목록 업데이트
folderList.innerHTML = '';
foldersInPage.forEach(folderName => {
const folderDiv = document.createElement('div');
folderDiv.classList.add('folder-name');
folderDiv.classList.add('folder-item');
// 폴더의 첫 번째 이미지 URL 가져오기
const firstImageURL = getFirstImageURL(folderName);
if (firstImageURL) {
// 첫 번째 이미지가 있는 경우, 이미지와 함께 폴더 이름 출력
const folderImage = document.createElement('img');
folderImage.classList.add('folder-image');
folderImage.src = firstImageURL;
folderDiv.appendChild(folderImage);
}
const folderNameDiv = document.createElement('div');
folderNameDiv.textContent = folderName;
folderDiv.appendChild(folderNameDiv);
folderDiv.addEventListener('click', () => {
showImageList(folderName);
});
folderList.appendChild(folderDiv);
});
}
// 페이지 이동 함수
function goToPage(newPage) {
if (newPage >= 1 && newPage <= page_max) {
page = newPage;
updatePageNumbers(); // 페이지 번호 업데이트
}
}
// 이미지를 클릭하면 아래 이미지로 화면 이동
imageDisplay.addEventListener('click', function (event) {
const images = imageDisplay.querySelectorAll('img');
const clickedImage = event.target;
// 클릭한 이미지의 인덱스 가져오기
const clickedIndex = Array.from(images).indexOf(clickedImage);
// 다음 이미지의 인덱스 계산
const nextIndex = clickedIndex + 1;
// 이미지가 다음 이미지가 존재하면 스크롤 이동
if (nextIndex < images.length) {
const nextImage = images[nextIndex];
nextImage.scrollIntoView({ behavior: 'auto', block: 'start' });
} else {
// 맨 마지막 이미지를 클릭하면 화면의 맨 위로 이동
window.scrollTo({ top: 0, behavior: 'auto' });
}
});
</script>
</html>
이미지리스트를 나열할 수 있습니다.
728x90
'javascript' 카테고리의 다른 글
| JavaScript랑 Node.js랑 서로 통신하기 (0) | 2023.10.08 |
|---|---|
| 데이터 포맷의 종류와 자바스크립트로 접근 방법 (0) | 2023.10.06 |
| 자바스크립트로 정규 표현식 (Regular expression) 테스트 (1) | 2023.10.03 |
| 자바스크립트(javascript) 클래스(Class) 알아보기 (0) | 2023.10.01 |
| 자바스크립트(Javascript) 변수 기본 (1) | 2023.10.01 |