브라우저는 보안상의 이유로 input 요소를 통해 선택한 이미지 파일의 실제 경로에 접근하는 것을 허용하지 않습니다. 즉, 브라우저 환경에서 실행되는 JavaScript는 파일 시스템에 직접 접근할 수 없습니다. 따라서 사용자가 선택한 이미지 파일을 서버나 다른 곳으로 전송하기 전에 미리 확인할 수 있도록 미리보기 기능을 직접 구현해야 합니다.
방법 1: URL 클래스 활용하기
URL 클래스의 createObjectURL() 함수를 사용하면 input으로 선택한 이미지 파일에 대한 객체 URL을 생성할 수 있습니다. 이렇게 만든 URL을 img 태그의 src 속성에 할당하면 이미지를 화면에 바로 표시할 수 있습니다.
예제
코드는 다음과 같습니다.
<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
const previewImage = e => {
const preview = document.getElementById('preview');
preview.src = URL.createObjectURL(e.target.files[0]);
preview.onload = () => URL.revokeObjectURL(preview.src);
};
</script>
이 방식은 파일을 별도로 읽어 들이지 않고 브라우저가 제공하는 객체 URL을 참조하기 때문에 처리 속도가 빠르고 메모리 효율적이라는 장점이 있습니다. 이미지 로딩이 완료된 후 revokeObjectURL()을 호출하여 불필요한 메모리 점유를 해제하는 것이 좋습니다.
방법 2: FileReader 클래스 활용하기
이 방법은 input 요소에서 받아온 파일을 읽어 들여 이미지를 base64 형식으로 인코딩한 데이터 URL 문자열을 생성합니다. 이 문자열을 img 태그의 src 속성에 할당하면 이미지를 표시할 수 있습니다.
예제
코드는 다음과 같습니다.
<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
const previewImage = e => {
const reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = () => {
const preview = document.getElementById('preview');
preview.src = reader.result;
};
};
</script>
FileReader 방식은 base64 문자열 자체를 결과로 얻기 때문에, 미리보기뿐만 아니라 서버 전송 없이 클라이언트 측에서 데이터를 저장하거나 처리해야 하는 경우에도 유용합니다.
실행 결과
두 방법 모두 아래와 같이 파일을 선택하는 즉시 이미지가 화면에 미리보기로 표시됩니다.
