Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML과 JavaScript(jQuery)로 이미지 업로드 전 미리보기 구현하기

이미지 업로드 전 미리보기란?

웹 서비스에서 파일을 업로드할 때, 사용자가 선택한 이미지를 업로드 직전에 화면에 바로 미리 보여주는 기능은 사용자 경험(UX)을 크게 향상시킵니다. 잘못된 파일을 선택했는지 확인할 수 있고, 별도의 페이지 이동이나 새로고침 없이 즉시 결과를 확인할 수 있기 때문입니다.

이 기능은 HTML의 파일 입력 요소와 JavaScript의 FileReader 객체만으로 간단하게 구현할 수 있습니다. 아래에서 단계별로 살펴보겠습니다.

1단계: HTML 마크업 작성

먼저 파일을 선택할 input 요소와 미리보기를 표시할 img 요소를 준비합니다. jQuery를 사용하므로 CDN 스크립트도 함께 포함합니다.

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id = "form1" runat = "server">
   <input type = 'file' id = "demo" />
   <img id = "myid" src = "#" alt = "새 이미지" />
</form>

여기서 type='file' 속성을 가진 input이 파일 선택 버튼 역할을 하며, 사용자가 이미지를 선택하면 아래쪽의 img 태그 영역에 해당 이미지가 표시됩니다.

2단계: JavaScript(jQuery) 코드 작성

다음으로 파일 선택 시 실행될 미리보기 함수를 작성합니다.

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

$("#demo").change(function() {
   display(this);
});

코드 동작 원리

  • 파일 선택 감지: $("#demo").change() 이벤트 핸들러가 사용자가 파일을 선택하는 순간을 감지합니다.
  • FileReader 생성: 브라우저 내장 API인 FileReader 객체를 만들어 선택된 파일을 읽습니다.
  • DataURL 변환: readAsDataURL() 메서드가 이미지 파일을 Base64 인코딩된 데이터 URL 문자열로 변환합니다.
  • 이미지 표시: 파일 읽기가 완료되면 onload 콜백이 실행되어, 결과 문자열을 img 요소의 src 속성에 할당함으로써 화면에 이미지가 나타납니다.

추가 팁

실무에서는 다음 사항을 함께 고려하면 더 완성도 높은 기능을 만들 수 있습니다.

  • 파일 형식 검증: input.files[0].type 값을 확인해 이미지 파일(jpg, png 등)만 허용하도록 처리하세요.
  • 파일 크기 제한: 용량이 큰 파일은 미리보기 및 업로드 성능에 영향을 주므로 크기 검사를 추가하는 것이 좋습니다.
  • vanilla JS 활용: jQuery 없이 document.getElementById('myid').src = event.target.result; 방식으로도 동일하게 구현할 수 있습니다.

이처럼 FileReader API를 활용하면 서버 통신 없이 클라이언트 측에서 빠르고 간편하게 이미지 미리보기를 구현할 수 있습니다.