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를 사용하여 이를 안전하게 반복할 수 있습니다.

js
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
# dom-input-files-dev

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
files

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기