[HTML] 폴더업로드 webkitdirectory 속성

webkitdirectory 속성이란?

HTML의 <input type="file"> 요소에 webkitdirectory 속성을 추가하면, 사용자가 파일 대신 **디렉토리(폴더)**를 선택할 수 있도록 설정할 수 있습니다. 즉, 하나의 폴더를 선택하면 그 폴더 안에 있는 모든 파일들이 함께 선택되는 효과를 얻을 수 있습니다.

주요 특징:

• 파일 대신 폴더 선택: 사용자는 파일 선택 대화창에서 폴더를 선택할 수 있습니다.
• 하위 폴더 포함: 선택된 폴더의 하위 폴더에 있는 파일들도 함께 선택됩니다.
• File 객체: 선택된 각 파일은 File 객체로 나타나며, webkitRelativePath 속성을 통해 선택된 폴더 내에서의 상대 경로를 알 수 있습니다.
• 브라우저 호환성: 주로 웹킷 기반 브라우저(Chrome, Safari)에서 지원되며, Firefox에서도 사용할 수 있지만 비표준 특성이므로 주의해야 합니다.

 

아래 예제에서는 사용자가 하나 이상의 디렉토리를 선택할 수 있는 디렉토리 선택기가 제공됩니다. change 이벤트가 발생하면 선택한 디렉토리 계층에 포함된 모든 파일 목록이 생성되어 표시됩니다.

<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>

document.getElementById("filepicker").addEventListener(
  "change",
  (event) => {
    let output = document.getElementById("listing");
    for (const file of event.target.files) {
      let item = document.createElement("li");
      item.textContent = file.webkitRelativePath;
      output.appendChild(item);
    }
  },
  false,
);

 

 

출처처 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory