[JavaScript] FileReader란

프로젝트를 하던 도중 이미지 미리보기를 구현할 일이 있었다.

file을 가져오면서 FileReader를 사용하게 되었다.

document.getElementById('images').addEventListener('change', function (event) {
    const files = event.target.files;
    const imageContainer = document.getElementById('div_added_pictures');
    imageContainer.innerHTML = ''; // 기존 미리보기 이미지 제거

    Array.from(files).forEach(file => {
        const reader = new FileReader();

        reader.onload = function (e) {
            // 이미지 미리보기 생성
            const imageItem = document.createElement('div');
            imageItem.className = 'image_item';
            imageItem.innerHTML = `<img src="${e.target.result}" alt="미리보기 이미지">`;
            imageContainer.appendChild(imageItem);
        };

        reader.readAsDataURL(file); // 파일을 읽고 미리보기 생성
    });
});

 

FileReader는 JavaScript의 내장 객체로, 웹 애플리케이션에서 파일을 비동기적으로 읽을 수 있도록 해줍니다. 주로 파일 업로드와 관련된 작업에서 사용되며, 사용자가 선택한 파일의 내용을 읽어들여 이를 표시하거나 처리하는 데 유용합니다.

주요 메서드

• readAsText(file): 파일을 텍스트 형식으로 읽습니다.
• readAsDataURL(file): 파일을 데이터 URL 형식으로 읽습니다. 이미지 파일을 미리보기할 때 자주 사용됩니다.
• readAsArrayBuffer(file): 파일 내용을 ArrayBuffer로 읽습니다. 이진 데이터를 처리할 때 유용합니다.

이벤트

FileReader는 읽기 작업이 완료되거나 오류가 발생할 때 이벤트를 발생시킵니다. 주요 이벤트는 다음과 같습니다:

• onload: 파일 읽기가 성공적으로 완료되었을 때 발생합니다.
• onerror: 파일 읽기 중 오류가 발생했을 때 발생합니다.
• onloadend: 읽기가 완료되면(성공/실패 관계없이) 항상 발생합니다.

사용 예

const reader = new FileReader();

reader.onload = function(e) {
    console.log(e.target.result); // 파일 내용을 출력
};

reader.readAsDataURL(file); // 파일 읽기 시작