[책] 자바스크립트 코드 레시피 278 - 147일차

파일 정보 읽어 오기

• 파일 선택 기능을 표시하고 싶을 때

구문

요소.files

설명

input 요소의 type 속성을 file로 설정하면 파일 선택 폼이 표시됩니다. 파일 선택 폼을 사용하여 파일을 임의로 선택할 수 있습니다. 자바스크립트는 change 이벤트가 발생하면 event.target.files 속성을 참조하여 input 요소에 지정된 파일 리스트를 가져올 수 있습니다. multiple 속성을 지정하면 하나가 아닌 여러 파일의 작업도 가능하며, files 속성의 배열도 여러 개의 요소를 가집니다.

실습

index.html

<input type="file" id="myFile" accept=".txt">

---

script.js

const element = document.querySelector('#myFile');
element.addEventListener('change', (event) => {
  const target = event.target;
  const files = target.files; // 선택된 파일 참조
  const file = files[0]; // 배열 타입이므로 0번째 파일 참조
  console.log(`${file.name} 파일이 선택되었습니다.`); // 유저가 선택한 파일명 표시
});