在前端开发过程中，我们经常需要在网页中提供一个用于打开本地文件夹的链接。这个功能可以帮助用户方便地访问本地文件夹，例如查看下载的文件或者选择上传文件。
方案
在实现这个功能时，我们可以借助 HTML5 的新特性——file: URL 协议。该协议可以将本地文件系统中的文件或目录映射为 URL 地址，从而可以在浏览器中访问。
使用 file: URL 协议的方式有两种：
1. 使用 <a> 标签
我们可以创建一个链接，使用 file: 协议作为链接地址。当用户点击链接时，浏览器会自动调用操作系统的默认文件浏览器来打开指定的文件夹。
<a href="file:///C:/Users/Username/Documents">打开文档文件夹</a>
上述示例中，我们将 Windows 系统下的“文档”文件夹路径作为链接地址，用户点击该链接后即可打开该文件夹。
但需要注意的是，file: 协议只能在本地文件系统中使用，因此这种方法只适用于运行在本地的网页或者浏览器插件等场景。
2. 使用 JavaScript
我们还可以使用 JavaScript 的 window.open() 方法来打开本地文件夹。与上一种方法不同的是，这种方式可以在非本地文件系统的环境中使用。
window.open('file:///C:/Users/Username/Documents');
上述代码中，我们将需要打开的文件夹路径作为参数传递给 window.open() 方法。该方法会弹出一个新窗口来打开指定的文件夹。
注意事项
在使用 file: 协议时，需要注意以下几点：
不同操作系统下的文件路径格式可能不同。例如，Windows 系统下的文件路径使用反斜杠（
\）分隔路径和文件名，而 UNIX/Linux 系统下的文件路径使用正斜杠（/）分隔路径和文件名。安全限制。由于
file:协议能够直接访问本地文件系统，因此浏览器会对其进行严格的安全限制。在某些情况下，浏览器可能会禁止使用该协议。此外，在使用该协议时，需要注意避免使用绝对路径或者包含用户信息的路径，以避免泄漏敏感信息。浏览器兼容性。虽然
file:协议已经成为 HTML5 的标准，但并不是所有浏览器都支持该协议。使用该协议时，需要测试不同浏览器的兼容性，并根据需要提供备选方案。
示例代码
以下是一个使用 JavaScript 打开本地文件夹的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ------ ---------------- -------- ----------------------- ---------- ------------ - ------ ---- - --------------------------------------------- ------------------------ - ------ --- ---------- ------- ------ ------- ----------- ---------------- -------------------------- -------- ------------------------------------- ------- -------展开代码
该示例中，我们创建了一个简单的网页，包含一个文本框和一个按钮。用户可以在文本框中输入要打开的文件夹路径，然后点击按钮即可打开指定的文件夹。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31624
