File API

인터페이스

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

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

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();
  }
});

ê²°ê³¼

명세서

같이 보기

• <input type="file">: 파일 input 요소
• text() method: .text()
• DataTransfer 인터페이스