JS에서 files 속성

08-11 fileupload의 ajax/upload.html에서

Q.

const profilePhotoFiles = document.querySelector("#profile-photo").files; 에서, files가 붙여졌기 때문에, 단일 항목에 대해서도 다중항목에 대해서도 동일하게 취급할 수 있는 것인가?

upload.html:72

 

GitHub Copilot

사용된 1 참조

네, files 속성을 사용하면 단일 파일이든 다중 파일이든 동일하게 처리할 수 있습니다. files는 항상 FileList 객체를 반환하므로, 선택된 파일의 수에 관계없이 같은 방식으로 접근하고 처리할 수 있습니다.

 

예를 들어:

const profilePhotoFiles = document.querySelector("#profile-photo").files;

for (let i = 0; i < profilePhotoFiles.length; i++) {

     const file = profilePhotoFiles[i];

     console.log(`파일 이름: ${file.name}`);

      // 추가 처리 로직

}

 

이렇게 하면 사용자가 하나의 파일만 선택했을 때도 여러 개의 파일을 선택했을 때도 같은 코드로 파일들을 처리할 수 있습니다.