File API & FileReader

로컬 파일 핸들링

File API는 웹 애플리케이션이 사용자의 로컬 파일 시스템에 접근하고 파일의 내용을 읽을 수 있도록 해주는 표준 인터페이스입니다. 주로 <input type="file"> 요소나 드래그 앤 드롭 이벤트를 통해 선택된 File 객체를 다룹니다.

여기에 포함된 FileReader 객체는 파일의 내용을 비동기적으로 읽어 메모리에 저장하며, 텍스트, Data URL(Base64 인코딩된 이미지), ArrayBuffer 형태로 변환할 수 있습니다. 이를 통해 서버로 파일을 전송하기 전에 이미지 미리보기를 제공하거나, 클라이언트 사이드에서 파일 포맷 검증을 수행할 수 있습니다.

// NO_PREVIEW
// 이미지 파일 미리보기 구현 예제
/*
<input type="file" id="fileInput" accept="image/*">
<img id="preview" src="" alt="미리보기" style="max-width: 200px;">
*/

function handleFileSelect(event) {
  // 실제 브라우저 환경에서는 event.target.files 를 사용합니다.
  // const file = event.target.files[0];
  
  // 모의 파일 객체 (설명용)
  const mockFile = new File(["dummy content"], "example.png", { type: "image/png" });
  console.log("선택된 파일 이름:", mockFile.name);
  console.log("파일 크기:", mockFile.size, "bytes");

  // FileReader 인스턴스 생성
  const reader = new FileReader();

  // 파일 읽기가 완료되었을 때의 이벤트 핸들러
  reader.onload = function(e) {
    console.log("파일 읽기 완료. Data URL 길이:", e.target.result.length);
    // 브라우저 돔 조작 예: document.getElementById('preview').src = e.target.result;
  };

  // 오류 처리
  reader.onerror = function(e) {
    console.error("파일 읽기 오류 발생!");
  };

  // 파일을 Data URL 형식(Base64)으로 읽기 시작 (이미지 미리보기에 적합)
  // reader.readAsDataURL(file); 
}

handleFileSelect();

실행 결과