HTMLInputElement: files property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTMLInputElement.files 속성은 <input type="file"> 요소로 선택한 FileList에 접근할 수 있습니다.

값

선택한 파일이 있는 경우 해당 파일을 나열하는 FileList 객체입니다. **HTMLInputElement**가 type="file"이 아닌 경우는 null입니다.

예제

이 예제에서는 HTMLInputElement.files 속성에 접근하여 사용자가 선택한 각 파일의 이름, 수정된 날짜, 크기 및 타입을 로그에 출력합니다.

HTML

html

<input id="files" type="file" multiple />

JavaScript

**HTMLInputElement.files**는 파일이 선택되지 않은 경우에도 FileList의 인스턴스를 반환합니다. 따라서 파일 선택 여부를 확인하지 않아도 for...of를 사용하여 이를 안전하게 반복할 수 있습니다.

const fileInput = document.getElementById("files");

console.log(fileInput.files instanceof FileList); // 비어있어도 참입니다.

for (const file of fileInput.files) {
  console.log(file.name); // 파일 이름 출력
  let fileDate = new Date(file.lastModified);
  console.log(fileDate.toLocaleDateString()); // 로케일에 맞는 날짜 출력
  console.log(
    file.size < 1000 ? file.size : Math.round(file.size / 1000) + "KB",
  );
  console.log(file.type); // MIME 유형 출력
}

명세서

Specification
HTML Standard # dom-input-files-dev

브라우저 호환성

BCD tables only load in the browser

같이 보기

DataTransfer.files