[JavaScript] 다중 파일 업로드시 진행률(ProgressBar) 표시

# 소스코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>이미지 썸네일 생성</title>
    <style type="text/css">
        #fileSelect {
            display:none;
        }

        .progressBar {
            width:100%;
        }
    </style>
</head>
<body>
<input type="file" id="fileSelect" multiple/>
<div>
    <div id="progressContainer"></div>
</div>
<br/><hr/><br/>
<button id="btnFileSelect">파일 선택</button>
<button id="btnFileUpload">업로드</button>
</body>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {

        // @event#01. 파일 선택 버튼에 대한 클릭 이벤트 처리
        document.querySelector("#btnFileSelect").addEventListener("click", function() {
            // 파일 선택 input을 클릭함
            document.querySelector("#fileSelect").click();
        });

        // @event#02. 업로드할 File 개수별 프로그래스바 UI 생성
        document.querySelector("#fileSelect").addEventListener("change", function(event) {

            for(let file of event.target.files) {

                // p 요소 생성
                const divElement = document.createElement("div");
                divElement.classList.add("uploadProgress");

                // progress 요소 생성
                const progressElement = document.createElement("progress");
                progressElement.setAttribute("value", "0");
                progressElement.setAttribute("max", "100");
                progressElement.classList.add("progressBar");

                // span 요소들 생성
                const loadedSpan = document.createElement("span");
                loadedSpan.textContent = "0";
                loadedSpan.classList.add("loaded");

                const totalSpan = document.createElement("span");
                totalSpan.textContent = "0 바이트";
                totalSpan.classList.add("totalBytes");

                const rateSpan = document.createElement("span");
                rateSpan.textContent = "0%";
                rateSpan.classList.add("rate");

                // span 요소들을 p 요소에 추가
                divElement.appendChild(progressElement);
                divElement.appendChild(document.createTextNode(" ")); // 공백 추가
                divElement.appendChild(loadedSpan);
                divElement.appendChild(document.createTextNode(" / ")); // 공백 추가
                divElement.appendChild(totalSpan);
                divElement.appendChild(document.createTextNode("（"));
                divElement.appendChild(rateSpan);
                divElement.appendChild(document.createTextNode("）"));

                document.querySelector("#progressContainer").appendChild(divElement);
            }
        });

        // @event#03. 업로드할 File 개수별 프로그래스바 UI 생성
        document.querySelector("#btnFileUpload").addEventListener("click", function() {

            const files = document.querySelector("#fileSelect").files

            if(files.length > 0) {

                for(let num = 0; num < files.length; num++) {

                    const reader = new FileReader();

                    // FileReader 로드 이벤트 핸들러 지정
                    reader.onloadend = function(event) {

                        const rate = (event.loaded * 100 / event.total).toFixed(1);
                        document.querySelectorAll(".progressBar")[num].value = rate;
                        document.querySelectorAll(".loaded")[num].textContent = event.loaded;
                        document.querySelectorAll(".totalBytes")[num].textContent = event.total + " 바이트";
                        document.querySelectorAll(".rate")[num].textContent = rate + "%";
                    };

                    // 바이너리 형식으로 파일 데이터 얻기
                    reader.readAsBinaryString(files[num]);
                }
            } else {
                alert("업로드할 이미지 파일이 존재하지 않습니다.");
            }
        });
    });
</script>
</html>

# 출력결과

이미지 썸네일 생성

'JavaScript' 카테고리의 다른 글

[JavaScript] 이미지 파일 업로드 및 썸네일 생성 (0)	2024.01.18
[JavaScript] AJAX를 이용하는 Page Navigation 제작 (0)	2023.12.08
[JavaScript] 체크박스를 이용한 백분율 선택 (0)	2023.05.24
[JavaScript] 입력한 텍스트의 Byte 체크 (0)	2023.02.14
[JavaScript] 입력한 텍스트의 문자길이 체크 (0)	2023.02.14

# 소스코드

# 출력결과

'JavaScript' 카테고리의 다른 글

티스토리툴바