HTML5 파일 선택 버튼 대신 이미지 미리보기로 표시하기 – FileReader 활용 가이드

개요

HTML5의 <input type="file"> 요소는 기본적으로 브라우저 스타일의 "파일 선택" 버튼으로만 표시됩니다. 하지만 JavaScript의 FileReader API를 활용하면 사용자가 선택한 이미지를 서버에 업로드하지 않고도 즉시 화면에 미리 보기로 표시할 수 있습니다. 이 글에서는 그 구현 방법을 단계별로 살펴봅니다.

1. HTML 마크업 작성

먼저 파일을 선택할 <input> 요소와, 선택된 이미지를 출력할 <img> 요소를 하나의 폼 안에 배치합니다.

<form id="myform" runat="server">
  <input type='file' id="myimg" />
  <img id="myid" src="#" alt="새 이미지" />
</form>

2. JavaScript FileReader 구현

다음 함수는 사용자가 선택한 첫 번째 파일을 읽어 Data URL로 변환한 뒤, <img> 태그의 src 속성에 할당합니다. jQuery의 change 이벤트와 함께 연결해 사용합니다.

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#myid').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$("#myimg").change(function () {
  readURL(this);
});

3. 코드 동작 원리

• 파일 존재 확인: input.files에 파일이 실제로 담겼는지 검사합니다.
• FileReader 생성: 브라우저에 내장된 FileReader 객체로 파일을 비동기 방식으로 읽습니다.
• readAsDataURL(): 이미지 파일을 Base64로 인코딩된 Data URL 문자열로 변환합니다.
• onload 콜백: 읽기가 완료되면 변환된 문자열을 img 태그의 src에 넣어 화면에 바로 렌더링합니다.

4. 모바일에서 카메라 바로 실행하기

스마트폰 환경에서는 accept와 capture 속성을 조합해 "파일 선택" 대신 카메라를 곧바로 실행할 수도 있습니다.

<input type="file" accept="image/*" capture="camera" />

accept="image/*"는 선택 가능한 파일을 이미지로 제한하고, capture="camera"는 모바일 기기에서 카메라 앱을 즉시 호출합니다. 단, 이 속성은 데스크톱 브라우저에서는 무시되며 모바일 브라우저마다 지원 범위가 다르므로 크로스 브라우징 테스트가 필요합니다.

마무리

FileReader API를 활용하면 서버 통신 없이 클라이언트 측만으로 이미지 미리 보기를 구현할 수 있습니다. 프로필 사진 등록, 게시글 이미지 첨부 등 다양한 UI에서 유용하게 활용할 수 있으니 꼭 익혀두세요.