如何从HTML输入类型"文件"或任何其他方式获取文件夹目录？

Question

所以我有一个类型的基本表单输入,"file"但我希望用户能够选择文件夹位置而不是文件.

如何获取此输入以选择文件夹而不是文件,还是有其他方法可以执行此操作？

Answer 1

偶然发现这个页面,然后发现只有javascript(没有像ActiveX或Flash这样的插件)这是可能的,但只是在chrome中:

基本上,他们在文件输入元素"webkitdirectory"上添加了对新属性的支持.你可以像这样使用它:

<input type="file" id="ctrl" webkitdirectory directory multiple/>

它允许您选择目录.对于支持多文件选择但不支持目录选择的浏览器,multiple属性是一个很好的后备.

当您选择目录时,文件可通过控件的dom对象(document.getElementById('ctrl'))获得,就像它们具有multiple属性一样.浏览器以递归方式将所选目录中的所有文件添加到该列表中.

你已经可以添加目录属性了,以防它在某些时候被标准化(找不到任何关于它的信息)

但请注意,这会阻止选择单个文件的可能性.迄今为止,使用"标准"方式(非Flash,非Silverlight等)选择文件和目录的唯一方法是提供两个单独的输入元素. (5认同)
我不会依赖这个，因为我在实时 HTML 规范中没有看到这样的“directory”属性 https://html.spec.whatwg.org/multipage/input.html#the-input-element (3认同)
@NikolayMelnikov或通过拖放 (2认同)
看起来主要的桌面浏览器都支持它：https://caniuse.com/#feat=input-file-directory (2认同)

Answer 2

2022 年更新：

async function getDir() {
  const dirHandle = await window.showDirectoryPicker();

  // run code for dirHandle
}

Answer 3

您很可能正在考虑使用 flash/silverlight/activeX 控件。控件<input type="file" />不处理这个问题。

如果您不介意用户选择文件作为获取其目录的方式，您可以绑定到该控件的change事件，然后删除文件名部分并将路径保存在某处 - 但这已经是最好的了。

请记住，网页旨在与服务器交互。向远程服务器提供本地目录并不是“典型的”（服务器无法访问它，所以为什么要求它？）；然而文件是有选择地传递信息的一种手段。