「JavaScript」HTMLInputElement.webkitDirectory プロパティを使うサンプル

2020年11月24日

説明
HTMLInputElement.webkitDirectory プロパティで、 webkitdirectory という HTML 属性の値を反映し、
<input> 要素によってユーザーがファイルの代わりにディレクトリを選択できることを示します。

使用例1

<div class="sampleA">
  <input type="files" class="sampleB" name="uploadFile" webkitDirectory multiple>
</div>
CSSコード
.sampleA{
  overflow:hidden;
}
.sampleA .sampleB {
   position: absoulte;
}

使用例2

htmlコード
<input type="file" id="uploadFileSelect" name="uploadFileLst" webkitdirectory multiple />
<ul id="ulFileId"></ul>

JavaScriptコード
document.getElementById("uploadFileSelect").addEventListener("change", function(event) {
  let result = document.getElementById("ulFileId");
  let uploadFiles = event.target.files;

  for (let i=0; i<uploadFiles.length; i++) {
    let liItem= document.createElement("li");
    liItem.innerHTML = uploadFiles[i].webkitRelativePath;
    result.appendChild(liItem);
  };
}, false);