HTML 页面中的目录选择器

Question

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

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

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

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

此代码剪断来自here

Answer 4

脚本编写是不可避免的。

由于存在安全风险，因此未提供此功能。 <input type='file' />最接近，但不是您要找的。

查看此示例，该示例使用 Javascript 来实现您想要的。

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

Answer 5

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

Answer 6

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

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

Answer 7

截至 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 8

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

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