● 파일 업로드 요소 다루기
파일 업로드 요소는 input 태그의 type 속성값을 file로 지정하면 표시되는 요소입니다. 요소 이름에서 알 수 있듯이 파일을 업로드할 때 사용하는데, 요소의 값을 가져오는 방법이 다른 요소와 조금 다릅니다.
12/05/fileupload.html
<form name="frm">
<input type="file" name="upload">
</form>
파일 업로드 요소에서 핵심은 files 속성으로 반환되는 FileList 객체입니다. 앞의 코드를 웹 브라우저로 실행하고 이미지 파일을 하나 첨부한 뒤, 콘솔창에서 다음 코드를 실행해 보세요.
const filesObj = document.frm.upload.files;
console.log(filesObj);
그림처럼 결과로 FileList 객체가 반환됩니다. FileList 객체는 파일 업로드 요소로 선택한 파일에 대한 다양한 정보를 담고 있는 객체입니다.
그림 12-38 실행결과