File API

개념 및 사용법

File API를 사용하면 웹 애플리케이션이 파일과 그 콘텐츠에 접근할 수 있습니다.

웹 애플리케이션은 사용자가파일<input> 요소를 사용하거나드래그 앤드 드롭을 통해 파일을 사용할 수 있도록 설정하면 파일에 접근할 수 있습니다.

이러한 방식으로 제공되는 파일 세트는 웹 애플리케이션에서 개별File 객체를 검색할 수 있는FileList 객체로 표시됩니다.File 객체는 파일의 이름, 크기, 유형, 마지막 수정 날짜 등의 메타데이터에 대한 접근을 제공합니다.

File 객체를FileReader 객체에 전달하여 파일 내용에 접근할 수 있습니다.FileReader 인터페이스는 비동기식이지만웹 워커에서만 사용할 수 있는 동기식 버전은FileReaderSync 인터페이스에서 제공됩니다.

인터페이스

Blob: Blob은 "이진 대용량 객체(Binary Large Object)"를 나타내며, 텍스트 또는 이진 데이터로 읽거나 해당 메서드를 사용하여 데이터를 처리할 수 있도록ReadableStream으로 변환할 수 있습니다.
File: 파일에 대한 정보를 제공하고 웹 페이지의 Javascript가 해당 콘텐츠에 접근할 수 있도록 허용합니다.
FileList: <input> 요소의files 속성으로 반환되며, 이를 통해<input type="file"> 요소로 선택한 파일 목록에 접근할 수 있습니다. 또한 드래그 앤드 드롭 API를 사용할 때 웹 콘텐츠에 끌어다 놓은 파일 목록에도 사용됩니다. 이 사용법에 대한 자세한 내용은DataTransfer 객체를 참조하세요.
FileReader: 웹 애플리케이션이File 또는Blob 객체를 사용하여 읽을 파일 또는 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있도록 합니다.
FileReaderSync: 웹 애플리케이션이File 또는Blob 객체를 사용하여 읽을 파일 또는 데이터를 지정하여 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 동기적으로 읽을 수 있도록 합니다.

다른 인터페이스로의 확장

URL.createObjectURL(): File 또는Blob 객체를 가져오는 데 사용할 수 있는 URL을 만듭니다.
URL.revokeObjectURL(): 이전에URL.createObjectURL()을 호출하여 생성한 기존 개체 URL을 해제합니다.

예제

파일 읽기

이 예제에서는파일<input> 요소를 제공하고, 사용자가 파일을 선택하면 선택한 첫 번째 파일의 내용을 텍스트로 읽고 그 결과를<div>에 표시합니다.

HTML

html

<input type="file" /><div></div>

CSS

css

.output {  overflow: scroll;  margin: 1rem 0;  height: 200px;}

JavaScript

const fileInput = document.querySelector("input[type=file]");const output = document.querySelector(".output");fileInput.addEventListener("change", async () => {  const [file] = fileInput.files;  if (file) {    output.innerText = await file.text();  }});