(Javascript) 이미지 선택 후 썸네일로 만들기

웹개발자로 일하면서 이미지를 업로드하고 불러오는 작업은 상당히 많이 사용된다.

 

관련 예제 코드를 적어놓도록 한다.

 

1. 파일을 실제로 선택할 Input태그와 썸네일을 출력할 div 태그를 준비

 

<input type="file" id="imgInput" multiple>
<div id="thumbnails"></div>

 

 

 

2. JavaScript Code

 

const imgInput = document.getElementById("imgInput");
const thumbnailsDiv = document.getElementById("thumbnails");

imgInput.addEventListener("change", function(event) {
  const files = event.target.files;  // 선택된 파일들
  thumbnailsDiv.innerHTML = "";  // 기존의 썸네일들 삭제

  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    // 이미지 파일인지 확인
    if (!file.type.startsWith("image/")) {
      continue;
    }

    const thumbnail = document.createElement("img");
    thumbnail.classList.add("thumbnail");

    const reader = new FileReader();
    reader.onload = (function(thumbnail) {
      return function(event) {
        thumbnail.src = event.target.result;
      };
    })(thumbnail);
    reader.readAsDataURL(file);

    thumbnailsDiv.appendChild(thumbnail);
  }
});

 

이 코드는 <input type="file"> 요소를 사용하여 이미지 파일을 선택할 수 있게 하고, change 이벤트가 발생하면 선택된 파일들의 썸네일을 생성하여 <div id="thumbnails"> 요소에 추가한다.

썸네일 생성에는 FileReader 객체를 사용하여 선택된 이미지 파일의 데이터를 읽고, img 요소를 생성하여 해당 데이터를 src 속성에 할당. 이때, 생성된 img 요소는 thumbnail 클래스를 가지도록 하여 스타일링.

 

이후 부터 진행될 이벤트는 서버단에서의 작업이 있을 테지만, 

서버단은 워낙 여러가지가 사용되니 스킵하도록 한다.

 

그럼 이만!