자바스크립트 이미지 파일 미리보기 여러개 만들기

자바스크립트를 이용해서 이미지 파일 업로드시 미리보기를 만들어봤어요.

만들었던 상황의 특징은 여러개의 <input type="file">이 있고 같은 형태로 반복되도록 만들었어요.

 

1개만 있다면, 아이디로 불어와 이미지를 보여지도록 할텐데, 같은 구조가 여러개라면 그게 불가능해서 그부분이 조금 고민스러웠어요!

 

우선 완성된 모습의 스샷

 

파일을 선택시에 input 다음에 미리보기 이미지가 오도록 했어요.

 

HTML 

<form action="#">
    <div class="uploadWrap">
    <input type="file" onchange="setThumbnail(event);">
    </div>
 
    <div class="uploadWrap">
    <input type="file" onchange="setThumbnail(event);">
    </div>
    .
    .
    . // 계속 있을 수 있음
    <input type="submit">    
</form>

SCRIPT

          function setThumbnail(event) {
            var uploadWrap = event.target.parentNode; 
            //이벤트 대상자의 부모
                  var reader = new FileReader();
 
                   reader.onload = function(event) {
                        console.log(uploadWrap01);
                        var newImg = document.createElement("img");
                        uploadWrap.appendChild(newImg);
                        newImg.setAttribute("src", event.target.result);
                        newImg.setAttribute("width", 200);
                        newImg.setAttribute("class", "pre_img");
                }; 
                reader.readAsDataURL(event.target.files[0]);
    
        }

 

이벤트 대상자의 부모에게 자식으로 IMG태그를 만들어주고, 거기에 미리보기이미지를 보여지도록 했어요.

2020/08/26 - [퍼블리싱/javascript&jQuery] - [javascript]자바스크립트 부모, 자식, 형제 노드 찾기

[javascript]자바스크립트 부모, 자식, 형제 노드 찾기

요건 활용했던, 자바스크립트이예요.