HTML页面中的目录选择器

Question

如何在html页面中创建目录选择器.
如果我使用输入文件元素我只能选择文件,但我需要选择目录.
我需要这样做,因为用户应该在他的计算机中选择正确的路径.
有解决方案吗

Answer 1

试试这个,我想它会对你有用:

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

您可以在https://plus.google.com/+AddyOsmani/posts/Dk5UhZ6zfF3找到此演示,如果您需要更多信息,可以在此处找到 .

Answer 2

出于安全原因,无法在纯HTML/JavaScript中完成.

选择要上传的文件是您可以做的最好的事情,即使这样,您也无法在现代浏览器中获得完整的原始路径.

您可以使用Java或Flash将某些内容放在一起(例如,使用SWFUpload作为基础),但这需要大量工作并带来额外的兼容性问题.

另一个想法是打开一个iframe显示用户的C:驱动器(或其他),但即使现在可能(由于安全原因可能被阻止,没有在很长一段时间内尝试),您的网站将无法与iframe通信(再次出于安全原因).

你需要这个什么？

@enfix您无法从服务器上保存客户端计算机上的文件.这完全不可能.您必须将文件作为常规文件下载提供,然后浏览器将提供用户选择保存文件的目录.但这完全超出您的控制范围.你不能影响这个过程的那一部分. (9认同)
@Pekka웃 他需要它做什么有什么关系 (3认同)
@user3808307因为它有助于确定这是否是 XY 问题。 (3认同)
我需要它来选择计算机内的路径，而不是上传。我使用这个路径来保存文件，但是带有JSP功能。 (2认同)
如何将JSP服务器中的文件保存到用户本地计算机上的某个路径？我不明白.你可以编辑你的问题来澄清吗？ (2认同)

Answer 3

截至 2022 年，现在有一个目录选择器 API：

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

  // run code for dirHandle
}

Answer 4

这是我的解决方案。它与上面的答案相同，但你应该注意到这一点webkitdirectory = "true"。

<input id="design" type="file" webkitdirectory = "true" directory/>