js选择文件夹对话框

JavaScript本身并没有内置的选择文件夹对话框的功能。然而，可以通过HTML5的<input>元素的type="file"属性配合webkitdirectory属性来实现这一功能，但需要注意的是，webkitdirectory属性是非标准的，并且主要在基于WebKit的浏览器（如Chrome和Opera）中得到支持。

基础概念

<input type="file">: 这是一个HTML元素，允许用户从他们的设备选择一个或多个文件。
webkitdirectory: 这是一个非标准的属性，用于指定用户可以选择一个文件夹及其所有子文件夹中的文件。

优势

用户可以直接选择整个文件夹，而不是单个文件，这在处理大量相关文件时非常方便。
减少了用户需要重复选择多个文件的步骤。

类型

单选文件夹: 用户只能选择一个文件夹。
多选文件夹: 结合multiple属性，允许用户选择多个文件夹（尽管这个功能在所有浏览器中可能不受支持）。

应用场景

文件管理应用，需要批量上传或处理文件夹中的文件。
开发工具，需要导入项目文件夹进行编译或调试。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择文件夹对话框</title>
</head>
<body>

<input type="file" id="folderInput" webkitdirectory multiple />

<script>
document.getElementById('folderInput').addEventListener('change', function(event) {
    for (let i = 0; i < event.target.files.length; i++) {
        console.log(event.target.files[i].webkitRelativePath);
    }
});
</script>

</body>
</html>