웹 애플리케이션을 개발하다 보면 사용자가 이미지를 서버에 업로드하기 전에 선택한 이미지를 화면에 바로 확인할 수 있도록 하는 기능이 필요할 때가 많습니다. 이럴 때 JavaScript의 FileReader() 객체를 사용하면 별도의 서버 통신 없이 클라이언트 측에서 손쉽게 이미지 미리보기를 구현할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form runat="server">
<input type='file' id="yourImage" />
<img id="chooseImage" src="#" alt="image" />
</form>
<script>
function readImage(fileInput) {
if (fileInput.files && fileInput.files[0]) {
var takingInputFile = new FileReader();
takingInputFile.onload = function(event) {
$('#chooseImage').attr('src', event.target.result);
}
takingInputFile.readAsDataURL(fileInput.files[0]);
}
}
$("#yourImage").change(function() {
readImage(this);
});
</script>
</body>
</html>
코드 동작 원리
파일 입력 요소(<input type="file">)에서 change 이벤트가 발생하면 readImage() 함수가 호출됩니다. 이 함수는 먼저 선택된 파일이 존재하는지 확인한 뒤, FileReader 객체를 생성하여 파일을 Data URL 형식으로 읽어들입니다. 파일 읽기가 완료되면 onload 이벤트 핸들러가 실행되며, 읽어온 결과값(event.target.result)을 <img> 태그의 src 속성에 할당함으로써 선택한 이미지가 즉시 화면에 표시됩니다.
실행 방법
위 프로그램을 실행하려면 코드를 anyName.html(index.html)이라는 이름으로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 됩니다.
실행 결과
