首页 > 编程语言 >JavaScript 浏览本地文件夹

JavaScript 浏览本地文件夹

时间:2023-12-15 15:15:36浏览次数:44  
标签:await const iterator 浏览 handler JavaScript 文件夹 file

1. JavaScript 浏览本地文件夹


    button.onclick = async function () {// 给按钮绑定事件
      try {
        const handler = await showDirectoryPicker(
          // {
          // mode: 'readwrite', //指定读写模式:读/读写
          // startIn: 'documents' // 指定默认打开的文件夹
          // }
        )
        const root = await processHandler(handler)
		
		// 遍历文件,读取文件,仅供参考,因为不是所有文件都是文本文件都可以readAsText()
        for await (const iterator of root.children) {
          if (iterator.kind !== 'file') continue
          const file = await iterator.getFile()
          const reader = new FileReader()
          reader.onload = e => {
            console.log(e.target.result)
          }
          reader.readAsText(file)
          console.log(file)
        }

      } catch (e) {
        if (e.toString().includes('AbortError')) {
          alert('用户关闭了对话框或者取消了授权')
        } else {
          alert('e')
        }
      }
    }
	
	
    /**
     * 递归遍历文件夹
     */
    async function processHandler(handler) {
      if (handler.kind !== 'file') { // 不是文件,就进行递归遍历,是文件,就直接返回
        const entries = await handler.entries()// 获取文件夹中所有的内容

        handler.children = []
        for await (const iterator of entries) {
          const childrenHandler = await processHandler(iterator[1])
          handler.children.push(childrenHandler)
        }
      }
      return handler
    }

2. Reference

  1. Window:showDirectoryPicker() 方法

注意浏览器兼容性:showDirectoryPicker 浏览器兼容性

  1. FileReader

3. Notice

  1. 文件操作全都是异步,如果结果有问题,请务必检查是否添加await、async等关键字
  2. 本文内容是 学习B站 【渡一教育】 整理得来

标签:await,const,iterator,浏览,handler,JavaScript,文件夹,file
From: https://www.cnblogs.com/echo-lovely/p/17903392.html

相关文章

  • JavaScript-IndexedDB API
    概述随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。现有的浏览器数据储存方案,都不适合储存大量数据:Cookie的大小不超过4KB,且每次请求都会发送回服务器;LocalStorage在2.5MB到10MB之间(各家浏览器不......
  • python 遍历文件目录下所有的文件夹和文件
    前言一些场景需要查找文件目录下一些文件,一、需要库os二、参考代码#(root,dirs,files)分别为:遍历的文件夹,遍历的文件夹下的所有文件夹,遍历的文件夹下的所有文件importpath="D:\脚本\微信"forroot,dirs,filesinos.walk(path+"/"):#iflen(dirs)==0:print(roo......
  • javascript怎么实现文件上传和下载功能
    在现代Web开发中,文件上传和下载是经常遇到的需求。JavaScript作为前端开发的语言之一,提供了许多强大的工具库和API来管理文件上传和下载的过程。本文将探讨如何使用JavaScript实现文件上传和下载的功能,首先介绍基于HTML5的FileAPI,然后使用jQuery和XMLHttpRequest......
  • 浏览器中的编译器和解释器
    之所以存在编译器和解释器,是因为机器不能直接理解我们所写的代码,所以在执行程序之前,需要将我们所写的代码“翻译”成机器能读懂的机器语言。按语言的执行流程,可以把语言划分为编译型语言和解释型语言。编译型语言在程序执行之前,需要经过编译器的编译过程,并且编译之后会直接保留机器......
  • 软件测试/人工智能|Edge浏览器实用插件推荐
    前言我们要把edge玩出花,让它充分发挥自己的强大实力,就需要安装各个功能强大的插件,这些插件可以帮助我们实现各种功能,本文就来给大家介绍一下几款实用的edge浏览器插件。AdblockPlus广告会降低我们的浏览体验,AdblockPlus能够屏蔽网页上的广告,我们的浏览更加干净和快速。我们......
  • 软件测试/人工智能|教你轻松玩转Edge浏览器
    前言提到Windows系统自带的浏览器,大家第一反应就是IE,对IE大家都是深恶痛绝的,然后大家就纷纷转向了Chrome和Firefox;应该说微软也是知道大家对IE的不满,痛定思痛之后,推出了基于Chromium内核的新浏览器——Edge,我本来也是拒绝的,但是使用之后,就真香了,使用十分方便,功能十分强大,因此本......
  • JavaScript Library – Lit
    前言我写过一篇关于Lit的文章,MaterialDesign,AngularMaterial,MDC,MWC,Lit的关系。如今material-webMWC已经发布1.0了,估计Angular也会在不远的将来从material-components-webMDC迁移到MWC。以后,我们要想深入理解AngularMaterial就必须对MWC有一定了解......
  • 通过excel表格批量修改文件夹名称
    脚本功能这个脚本用于重命名文件夹,特别是在多层嵌套的文件夹结构中。它通过读取一个Excel表格来获取重命名的信息。表格的第一列应包含当前的文件夹名称,第二列包含您想要更改为的新名称。脚本会递归地遍历指定路径下的所有文件夹,并根据表格中的信息重命名匹配的文件夹。 impo......
  • php获取详细访客信息,获取访客IP,IP归属地,访问时间,操作系统,浏览器,移动端/PC端,环境语言,访
    问题描述:需要获取访客访问网站信息1.代码示例与说明:<?phpheader("Content-Type:text/html;charset=utf-8");        //代码中涉及字符串处理,为防止汉字乱码需加编码说明functionchinesesubstr($str,$start,$len){          ......
  • js实现上传文件夹功能
    最近在研究上传文件夹功能,并上传到阿里云oss,研究了几天终于实现了。前端代码:添加“webkitdirectory”标签表示支持文件夹上传<inputtype='file'id="inputUploadDir"name="file"webkitdirectory>js代码部分$("#inputUploadDir").change(function(e){letfiles=t......