[JavaScript] 자바스크립트에서 파일정보 읽어오기

160_자바스크립트에서 파일정보 읽어오기

[적용]

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

---

[문법]

속성	의미	타입
input요소.files	선택된 파일 배열	배열

# input 요소는 <input type="file" />

---

[내용]

input 요소의 type 속성을 file로 설정하면 파일 선택 폼이 표시된다.

파일 선택 폼을 사용하여 파일을 임의로 선택할 수 있다.

자바스크립트는 change 이벤트가 발생하면 event.target.files 속성을 참조하여

input 요소에 지정된 파일 리스트를 가져올 수 있다.

 

multiple 속성을 지정하면 하나가 아닌 여러 파일의 작업도 가능하면,

files 속성의 배열도 여러 개의 요소를 가진다.

 

HTML                                                                                                                                                              index.html

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

JavaScript                                                                                                                                                          main.js

// input 참조
const element = document.querySelector('#myFile');

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

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김