js让用户手动选择用户文件夹

周遭.

已于 2023-12-01 10:32:09 修改

阅读量540

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-11-29 14:26:12 首次发布

本文链接：https://blog.csdn.net/qq_44279357/article/details/134687901

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

起因是开发过程中客户有这么个需求：读取路径下文件夹数量生成对应html静态页面，并加载对应图片。
理解：静态页面需要根据提供的指定目录，识别到该路径下有多少个文件夹，有多少个文件夹就在静态页面中有多少行数据，然后还需要在表格中显示每个文件夹中的内容和图片信息。
但查阅了很多资料，如使用fs（需引用require.js）无法实现，后来找到了一个新的API可供用户主动选择用户文件夹。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <button>打开文件夹</button>
  <script>
    var btn = document.querySelector('button');
    btn.onclick=function() {
        showDirectoryPicker() //选择文件夹
    }
  </script>
</body>

</html>

showDirectoryPicker效果图
Window 接口的 showDirectoryPicker() 方法用于显示一个目录选择器，以允许用户选择一个目录。

参数：

id 通过指定 ID，浏览器能够记住不同 ID 所对应的目录。当使用相同的 ID 打开另一个目录选择器时，选择器会打开相同的目录。
mode 字符串，默认为 “read”，可对目录进行只读访问。设为 “readwrite” 可对目录进行读写访问。
startIn 一个 FileSystemHandle对象或者代表某个众所周知的目录的字符串（如：“desktop”、“documents”、“downloads”、“music”、“pictures”、“videos”）。用于指定选择器的起始目录。

返回值：

一个 Promise 对象，会兑现一个FileSystemDirectoryHandle对象。

异常：AbortError

当用户直接关闭了目录选择器或选择的目录是敏感目录时将会抛出 AbortError。

注意：用户必须与页面或 UI 元素进行交互才能使该特性正常运行

浏览器兼容性：

try {
	var handle = showDirectoryPicker();
	console.log(handle);
} catch {
	alert("访问失败")
}

handle打印如下
打印handler

如下是完整代码：

var folderCount = 0;
        var btn = document.querySelector('button');
        btn.onclick = async function () {
            try {
                // 获得文件夹的句柄
                const handle = await showDirectoryPicker();
                const root = await processHandler(handle);
                //   获得文件内容
                const file = await root.children[1].getFile();
                const reader = new FileReader();
                reader.onload = e => {
                    // 读取结果
                    folderCount = e.target.result;
                    //获取到目标文件
                    console.log(e.target.result)
                    createTable(e.target.result)
                }
                reader.readAsText(file, 'utf-8')
            }
            catch {
                //用户拒绝查看文件
                alert('访问失败')
            }
        }
        //处理句柄
        async function processHandler(handle) {
            if (handle.kind === 'file') {
                return handle
            }
            handle.children = []
            const iter = await handle.entries();//获得文件夹中的所有内容
            //iter:异步迭代器
            for await (const info of iter) {
                var subHandle = await processHandler(info[1]);
                handle.children.push(subHandle)
            }
            return handle
        }
        function createTable(folderCount) {
            // 获取table的容器
            var ForlderTable = document.getElementById('ForlderTable');
            // var imagePath = './pages/igsData/';
            // 生成table的HTML代码
            var tableHTML = '<table>';
            tableHTML += '<tr><th>数据</th><th>图片1</th><th>图片2</th><th>图片3</th></tr>';
            for (var i = 0; i < folderCount; i++) {
                tableHTML += '<tr height=200px>';
                tableHTML += '<td><span>日期：</span><br><span>时间</span><br><span>距离：</span><br><span>传感器海拔：</span><br><span>描述：</span><br><span>目标：</span><br></td>';
                tableHTML += '<td><img src=./pages/igsData/' + i + '/' + i + '.png></td>';
                tableHTML += '<td><img src=./pages/igsData/' + i + '/' + i + '.png></td>';
                tableHTML += '<td><img src=./pages/igsData/' + i + '/' + i + '.png></td>';
                tableHTML += '</tr>';
            }
            tableHTML += '</table>';
            // 将生成的HTML插入到容器中
            ForlderTable.innerHTML = tableHTML;
        }