자바스크립트 파일 업로드와 미리보기 기능 구현하기

파일 업로드는 웹 애플리케이션에서 자주 사용되는 기능 중 하나입니다. 이 글에서는 예제로 자바스크립트를 사용하여 파일 업로드 폼을 다루는 방법에 대해서 알아보겠습니다. 파일을 선택하면 미리보기를 보여주고 업로드 버튼을 클릭하면 서버에 전송하는 기능을 구현한 예제입니다.

1. File 객체의 주요 속성

파일을 선택하면 File 객체가 생성되고 이 객체는 다양한 속성을 가지고 있습니다. 이를 통해 업로드한 파일에 대한 정보를 확인할 수 있습니다.

▼ File 객체의 주요 속성

속성	설명
name	파일의 이름을 나타냅니다.
lastModified	파일이 마지막으로 수정된 시간을 나타내는 타임스탬프입니다.
lastModifiedDate	파일이 마지막으로 수정된 시간을 Date 객체로 나타냅니다.
webkitRelativePath	파일의 상대 경로를 나타냅니다. 대부분의 경우 빈 문자열입니다.
size	파일 크기를 바이트 단위로 나타냅니다.
type	파일의 MIME 타입을 나타냅니다.

2. 파일 업로드 폼 예제

1. 예제 코드

<!DOCTYPE html>
<html>
<head>
     <title>자바스크립트를 사용한 파일 업로드 폼 다루기</title>
</head>
<body>
     <h1>파일 업로드 예제</h1>
     <form id="uploadForm">
     <input type="file" id="fileInput" accept="image/*">
     <img id="preview" src="#" alt="이미지 미리보기" style="display:none;">
     <button type="submit">업로드</button>
     </form>

     <script>
     
     const fileInput = document.getElementById('fileInput');
     const preview = document.getElementById('preview');
     const uploadForm = document.getElementById('uploadForm');

     // 파일 미리보기 기능 구현
     fileInput.addEventListener('change', (event) => {
     const file = event.target.files[0];
     console.log(file);
     const reader = new FileReader();

     reader.onload = (e) => {
          preview.src = e.target.result;
          preview.style.display = 'block';
     };

     reader.readAsDataURL(file);
     });

     // 파일 업로드 기능 구현
     uploadForm.addEventListener('submit', (event) => {
     event.preventDefault();

     // 이 부분에서 서버로 파일을 전송하는 로직을 구현해야 합니다.
     // 예를 들어, FormData 객체를 사용하여 AJAX 요청을 보낼 수 있습니다.
     const formData = new FormData(uploadForm);
     formData.append('file', fileInput.files[0]);

     // 이후 서버로 formData를 전송하는 AJAX 요청을 작성하십시오.
     });

     </script>
</body>
</html>

☞ 파일을 선택하면 미리보기가 표시되고 업로드 버튼을 클릭하면 서버로 전송하는 기능을 구현했습니다. 서버 측 코드는 이 글의 범위를 벗어나므로 작성하지 않았지만 실제 웹 애플리케이션에서는 서버로 파일을 전송하고 처리하는 로직을 추가해야 됩니다.

2. 실행 결과 화면

▼ 파일 선택 전 결과 화면