如何只选择目录而不是文件？

Question

我使用js创建表单，我的问题是如何只选择directory，不是 file？

下面是我的代码：

const realFileBtn = document.getElementById("real-file");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");

customBtn.addEventListener("click", function() {
  realFileBtn.click();
});

realFileBtn.addEventListener("change", function() {
  if (realFileBtn.value) {
    customTxt.innerHTML = realFileBtn.value;
  } else {
    customTxt.innerHTML = "No file chosen, yet.";
  }
});

<input type="file" id="real-file" hidden="hidden" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>

下面是我的输出：

实际上我希望输出不要选择file，只需选择 folder，因为下一步我需要将文件存储在此文件夹目录中。

如果成功输出是文件夹目录名称是：

C:\Staff 导入文件夹\Source

希望有人能帮我解决这个问题。谢谢。

Answer 1

在最新的浏览器中，您可以选择具有 元素的webkitdirectory 属性的目录内容，由Files and Directories entries API 定义，但我担心这会欺骗您，因为它只会选择此目录（及其子文件夹）中的所有文件。目前无法从此处导航此目录。

我们应该能够通过查看webkitEntries IDL 属性来导航这样的目录，但目前浏览器只能通过放置事件填充它。您可以在this Q.A 中查看演示。

inp.onchange = (e) => {
  console.log( inp.webkitEntries ); // []
  console.log( [...inp.files].map( file => file.name ) );
};

<input type="file" webkitdirectory id="inp">

但即便如此，虽然您将能够导航该目录，但您仍然无法在文件系统上设置任何内容。 Web 脚本根本没有权限在磁盘上写入任何内容，除了在 IndexedDB 等沙盒区域。

Answer 2

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

document.getElementById("filepicker").addEventListener("change", function(event) {
  let output = document.getElementById("listing");
  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);

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