딴 거 공부하다 보면 자주 안 쓰는 거는 기억의 희미 해지다 보니 정리 겸 작성하게 되었다
물론 뭐.. gpt한테 물어보면 금방 나오긴 하지만 공부할 겸 정리하였다
1. 여러 개의 파일 선택하는 법
<input type="file" id="upload" multiple/>input태그에 multiple를 작성하면 파일을 선택할 때 여러 개를 선택할 수 있다.
multiple를 선택 안 하면 여러 개를 클릭해도 하나만 선택하게 된다
2.input태그로 받은 파일 이벤트 처리
<body>
<input type="file" id="upload" multiple/>
<script>
const fileInput = document.getElementById("upload");
fileInput.addEventListener("change", (e) => {
const file = e.target.files;
console.log(file);
});
</script>
</body>
addEventListener('change')를 사용하면 input태그를 클릭 후 파일선택 한 뒤 열었을 때 이벤트 처리가 된다
위에 코드를 실행하면 브라우저가 제공하는 전용 객체 타입 FileList안에 선택한 파일에 대해 적혀있다
(객체이기 때문에 배열메서드를 바로 직접적으로는 못 사용함)
fileInput.addEventListener("change", (e) => {
const file = e.target.files[1]; //[] 인덱스 번호 넣어서 선택
console.log(file);
});2번째 줄에 []안에 인덱스 번호를 넣어 input file로 선택한 파일 중에 몇 번째를 선택할 건지 지정할 수 있다
위에 코드대로 하면 선택한 파일 중에 2번째 인거에 정보가 담겨있다
'javascript' 카테고리의 다른 글
| 자바스크립트에서 동기와 비동기가 차이 기초적인 Promise 사용법 (0) | 2025.11.17 |
|---|---|
| 자바스크립트 반복문 정리 (forEach,map,filter 사용법) (0) | 2025.10.05 |
| 자바스크립트 기초) var, let, const 차이와 호이스팅 완벽 정리 (2) | 2025.08.10 |
| 자바스크립트 애니메이션 효과) IntersectionObserver 사용법 정리 (1) | 2025.01.25 |
| 자바스크립트 객체, 구조분해 할당 사용법 정리 (0) | 2025.01.20 |
