📚[JS] 업로드할 슬라이드 이미지 미리보기 기능 구현하기 (f. bootstrap)

html 부분(bootstrap slide carousel 사용)

<label for="slideMultipleImage" class="form-label">이미지등록</label>
<input class="form-control" type="file"  name="image" value="" id="slideMultipleImage" multiple />

<h6 class="card-header text-center">슬라이드 미리보기</h6>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" id="multipleContainer" >
		<!-- 이미지가 들어올 부분 -->
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

 

부트스트랩 이용 시

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script>

 

 

js 부분

    // 슬라이드 미리보기
    function readMultipleImage(input) {
        if(input.files) {
            const fileArr = Array.from(input.files)
            fileArr.forEach((file, index) => {
                const reader = new FileReader()
                
                const $imgDiv = document.createElement('div')
                $imgDiv.classList.add('carousel-item')

                const $img = document.createElement('img')
                $img.classList.add('d-block','w-100')
                $imgDiv.appendChild($img)
                
                reader.onload = e => {
                    $img.src = e.target.result
                }

                if(index % 1 == 0) {        // div에 img가 하나씩만 들어갈 수 있게
                    $imgDiv.appendChild($img)
                }
                
                reader.readAsDataURL(file)
                multipleContainer.appendChild($imgDiv)
            })
            const item = document.querySelector('.carousel-item')
            item.classList.add('active')
        }        
    }

    document.getElementById('slideMultipleImage').addEventListener('change', (e) => {
        const multipleContainer = document.getElementById('multipleContainer')
        
        if (multipleContainer.firstElementChild) {  //재등록
            multipleContainer.innerHTML = "";       //삭제
        }

        readMultipleImage(e.target);

        $('.carousel').carousel()       //부트스트랩 슬라이드
    })