「JavaScript]inputのfileタグでディレクトリを指定する

2014年3月23日2021年11月17日

1.webkitdirectory属性を追加して、ディレクトリ選択をすることができます
htmlコード

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

2.ディレクトリでファイル選択されたものは、以下のようにJavaScriptから読み取る
JavaScriptコード

document.getElementById("filepicker").addEventListener("change", function(event) {
  let output = document.getElementById("listItem");
  let files = event.target.files;

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