[JavaScript] 미리보기 이미지 구현하기

document.getElementById('input').addEventListener('change', (e) => {
      const fileReader = new FileReader(); // File 을 읽기 위한 FileReader 객체 생성
      fileReader.readAsDataURL(e.target.files[0]); // Blob -> base64 data로 변환
 
      // 파일 읽기가 완료되었을 때 실행되는 이벤트 핸들러
      fileReader.onload = (e) => {
        let base64data = fileReader.result;
        document.getElementById('previewImg').src = base64data;
      }
    }
)

 

실제 img File의 img를 읽기위해서는 js에서 제공하는 FileReader 라는 객체를 이용해야 하므로 FileReader 객체를 생성하고

readAsDataURL 이라는 메서드를 통해 img File의 data를 base64로 형태로 인코딩하여 읽는다.

해당 작업이 완료되면 fileReader.onload 가 실행되고 base64data 에 img data를 할당하고 base64data를 <img id="previewImg"> 의 src 속성에 넣어주면 된다.

 

여기서 말하는 Base64 인코딩은 아스키코드에서 사용되는 문자64개로 Data를 표현한다고 이해하면 된다. 어떻게 Byte(8bit) 단위의 img Binary data를 나타나는지 궁금했었는데 3개의 byte를 4개의 6bit로 쪼개서 표현한다고 한다.