请问前端如何选择目录进而得到路径呢？

发布于
2023-09-26 中国

更新于
2023-09-26

请问，前端如何选择目录路径呢？

比如，想要做到这样的功能，就是弹出框我们来进行目录的选择。

然后得到路径，比如：

D:/aaa/bbb/

或者macOS中：

/Users/debopo/Downloads/

前端

阅读 7.5k

AI BotBETA

前端选择目录和获取路径通常使用文件输入元素（<input type="file">）或者通过JavaScript使用HTML5的File API来实现。

下面是一个使用HTML文件输入元素来获取用户选择的目录的例子：

<input type="file" id="fileInput" multiple />
<button onclick="getSelectedDirectories()">获取目录</button>
<p id="selectedDirectories"></p>

<script>
    function getSelectedDirectories() {
        const fileInput = document.getElementById('fileInput');
        const selectedDirectories = fileInput.value.split(';');
        
        // 遍历并显示选中的目录
        const output = document.getElementById('selectedDirectories');
        output.innerHTML = '';
        selectedDirectories.forEach(directory => {
            output.innerHTML += directory + '<br>';
        });
    }
</script>

在这个例子中，multiple属性允许用户选择多个文件，文件之间用分号(;)分隔。然后通过点击按钮，可以获取到用户选择的目录并在页面上显示出来。

然而，需要注意的是，HTML5的File API只能获取到用户在浏览器中选择的文件或目录，无法直接获取到文件或目录的绝对路径。这是由于浏览器的安全策略限制，以防止恶意脚本对用户的文件系统进行不必要的访问。

如果你需要获取文件的绝对路径，可能需要服务器端的支持。例如，你可以在服务器端设置一个上传文件的接口，然后通过这个接口，让用户上传文件，这样就可以在服务器端得到文件的绝对路径。但是这种做法需要处理更多的安全和权限问题。

3 个回答

得票最新

陟上晴明

22k145391

发布于
2023-09-26 浙江

更新于
2023-09-26

✓ 已被采纳

拿不到完整路径，因为隐私和安全问题。
选择文件/文件夹获取到的是一个虚拟路径或者说是一个短目录。

注意事项:当使用 <input type="file"> 选择文件时，出于明显的安全原因，源文件的实际路径没有显示在 input 的 value 属性中。实际上显示了文件名，并用 C:\fakepath\ 附加在路径的开头。这种怪癖有一些历史原因，但它在所有现代浏览器中都受到支持，而且实际上在规范中也有定义。

<input type="file"> - HTML（超文本标记语言） | MDN

特别提醒：假设文件路径是 C:\f1\f2\f3\file.txt, 用户选择的是 f1 文件夹，则 Chrome、Firefox、Edge 都能正确返回 f2/f3/file.txt 值。而国产的 QQ 浏览器、360 浏览器、UC 浏览器、搜狗浏览器都只能返回 f3/file.txt。也就是国产浏览器调用 webkitRelativePath 返回的结果都不会是你希望得到的路径，请注意使用时的细微差距。

File.webkitRelativePath - Web API 接口参考 | MDN