搜索
  • JavaScript可以实现访问本地文件夹吗？
  • 发布于 2个月前
  • 141 热度
    0 评论

问题：JavaScript可以实现访问本地文件夹吗？

这个功能放在之前是不可能实现的，因为考虑到用户的隐私，但是最近有一个新的api可以做到这一点。下面来进行一个简单的功能实现。


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

</html>
我们调用showDirectoryPicker这个函数就可以实现一个选择文件夹的功能。

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

2.2 返回值
一个 [Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 对象，会兑现一个 [FileSystemDirectoryHandle 对象。

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

三. 拿到文件夹中的内容
首先对于上面所写的东西，我们进行try catch的优化
try {
  // 获得文件夹的句柄
  const handle = await showDirectoryPicker();
}
catch {
  //用户拒绝查看文件
  alert('访问失败')
}
之后我们来看一下这个headler打印出来是什么：

3.1 句柄的简单解释
对于“句柄”，在下一直停留在一知半解的认识层面，近日在下学习Windows编程，决定趁此机会将句柄彻底搞清楚。查阅了一些网络上的资料，发现网络上的讲解大概可以分为两类：一种是以比喻、类比的方式说明，这种方法虽然形象易懂，但并没有从原理上、本质上加以揭示，让人仍然想问“为什么？”、“怎么实现？”。另一种是给出源代码，无可厚非，这当然是最本质的说明了，但这样一来，又显得不够直观，初学者理解起来有一定的难度。鉴于此，在下尽微末之能，结合自己的愚见，在两者之间折中，用图解的方式来将原理呈现出来，做到一目了然。

这里需要说明：
1.这里将句柄所能标识的所有东西（如窗口、文件、画笔等）统称为“对象”。
2.图中一个小横框表示一定大小的内存区域，并不代表一个字节，如标有0X00000AC6的横框表示4个字节。
3.图解的目的是为了直观易懂，所以不一定与源码完全对应，会有一定的简化。

让我们先看图，再解释。

其中，图1是程序运行到某时刻时的内存快照，图2是程序往后运行到另一时刻时的内存快照。红色部分标出了两次的变化。

简单解释：
Windows是一个以虚拟内存为基础的操作系统，很多时候，进程的代码和数据并不全部装入内存，进程的某一段装入内存后，还可能被换出到外存，当再次需要时，再装入内存。两次装入的地址绝大多数情况下是不一样的。也就是说，同一对象在内存中的地址会变化。（对于虚拟内存不是很了解的读者，可以参考有关操作系统方面的书籍）那么，程序怎么才能准确地访问到对象呢？为了解决这个问题，Windows引入了句柄。

系统为每个进程在内存中分配一定的区域，用来存放各个句柄，即一个个32位无符号整型值（32位操作系统中）。每个32位无符号整型值相当于一个指针，指向内存中的另一个区域（我们不妨称之为区域A）。而区域A中存放的正是对象在内存中的地址。当对象在内存中的位置发生变化时，区域A的值被更新，变为当前时刻对象在内存中的地址，而在这个过程中，区域A的位置以及对应句柄的值是不发生变化的。这种机制，用一种形象的说法可以表述为：有一个固定的地址（句柄），指向一个固定的位置（区域A），而区域A中的值可以动态地变化，它时刻记录着当前时刻对象在内存中的地址。这样，无论对象的位置在内存中如何变化，只要我们掌握了句柄的值，就可以找到区域A，进而找到该对象。而句柄的值在程序本次运行期间是绝对不变的，我们（即系统）当然可以掌握它。这就是以不变应万变，按图索骥，顺藤摸瓜。

所以，我们可以这样理解 Windows 句柄：
数值上，是一个32位无符号整型值（32位系统下）；逻辑上，相当于指针的指针；形象理解上，是Windows中各个对象的一个唯一的、固定不变的ID；作用上，Windows使用句柄来标识诸如窗口、位图、画笔等对象，并通过句柄找到这些对象。

下面，关于句柄，再交代一些关键性细节：

1.所谓“唯一”、“不变”是指在程序的一次运行中。如果本次运行完，关闭程序，再次启动程序运行，那么这次运行中，同一对象的句柄的值和上次运行时比较，一般是不一样的。

其实这理解起来也很自然，所谓“一把归一把，这把是这把，那把是那把，两者不相干”（“把”是形象的说法，就像打牌一样，这里指程序的一次运行）。

2.句柄是对象生成时系统指定的，属性是只读的，程序员不能修改句柄。
3.不同的系统中，句柄的大小（字节数）是不同的，可以使用sizeof()来计算句柄的大小。
4.通过句柄，程序员只能调用系统提供的服务（即API调用），不能像使用指针那样，做其它的事。

再回归正题。

3.2 处理句柄函数
async function processHandler(handle) {
  if (handle.kind==='file'){
    return handle
  }
    handle.children=[]
    const iter = await handle.entries();//获得文件夹中的所有内容
    //堆代码 duidaima.com
    //iter:异步迭代器
    for await (const info of iter){
      var subHandle = await processHandler(info[1]);
      handle.children.push(subHandle)
    }
    return handle
}

3.3 如何得到文件内容
const root = await processHandler(handle);
//   获得文件内容
 const file = await root.children[1].getFile();
 const reader = new FileReader();
 reader.onload=e=>{
   // 读取结果
   console.log(e.target.result)
 }
 reader.readAsText(file,'utf-8')
下面是完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>堆代码 duidaima.com</title>
</head>
<body>
  <button>打开文件夹</button>
  <script>
    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=>{
          // 读取结果
          console.log(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
    }
  </script>
</body>

</html>

用户评论
可能感兴趣的话题