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 通信（同样出于安全原因）。

你需要这个做什么？

Answer 3

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

https:// developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker

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

  // run code for dirHandle
}

Answer 4

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

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

Answer 5

如果您是服务器和用户（例如，您正在创建一个通过浏览器运行的应用程序，并且您需要选择一个文件夹），则尝试在单击某个按钮时从服务器调用 JFileChooser浏览器

JFileChooser chooser = new JFileChooser();
chooser.setCurrentDirectory(new java.io.File("."));
chooser.setDialogTitle("select folder");
chooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
chooser.setAcceptAllFileFilterUsed(false);

这段代码摘自这里

Answer 6

我做了一个解决办法。我有一个隐藏的文本框来保存该值。然后，在 form_onsubmit 上，
我将路径值（减去文件名）复制到隐藏文件夹。然后，将文件输入框设置为“”。这样，就不会上传任何文件。
我不记得 fileUpload 控件的事件。也许 onchange。已经有一段时间了。如果有值，我会解析文件名并将文件夹放回框中。当然，您会验证该文件是否为有效文件。
这将为您提供客户端工作站文件夹。
但是，如果您想反映服务器路径，则需要完全不同的编码方法。

Answer 7

由于安全风险，HTML 不提供此功能。 最接近，但不是您要查找的内容。

如果您仍在 Windows 10 上使用 IE11，您可以尝试此示例 使用 ActiveX 控件 来实现您想要的。

同样，如果操作系统是 Windows，您可以使用 VB脚本来访问核心控制文件以浏览文件夹。

Answer 8

如果您没有太多文件夹，那么我建议您使用 if 语句根据用户输入的详细信息选择上传文件夹。
例如

String user= request.getParameter("username");
if (user=="Alfred"){
//Path A;
}
if (user=="other"){
//Path B;
}