纯前端操作文件?

事情是这样的我发现vscode在线版居然可以打开文件目录和文件,还能保存文件。

兼容性一般 目前 谷歌 edge Opera 支持 其他均不支持

vscode.dev/

查了一下MDN 发现增加新的API 了

developer.mozilla.org/zh-CN/docs/...

showDirectoryPicker

这是一项实验性技术 未来版本可能会发生变化 作用就是显示一个目录选择器 返回Promise

js 复制代码
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
showDirectoryPicker().then(async (dir) => {
  const recursion = async (dir) => {
    if (dir.entries) {
      const dirs = dir.entries();
      for await (let item of dirs) {
        item.forEach((file) => {
          if (typeof file === "string") {
            const p = document.createElement("p");
            p.innerText = file;
            p.style.marginLeft = "10px";
            document.querySelector(".result").appendChild(p);
          } else {
            recursion(file);
          }
        });
      }
    }
  };
  recursion(dir);
 });
});

获取选中目录下所有的文件平铺展开

showOpenFilePicker

showOpenFilePicker这个API 返回用户所选的文件 不是目录默认单选 可设置 multiple 多选

js 复制代码
      btn.addEventListener("click", () => {
        showOpenFilePicker().then(async (file) => {
          console.log(await file[0].getFile());
        });
      });

可以调用getFile 返回 File对象 就跟 input file 返回的对象一样了可以操作了。

showSaveFilePicker

showSaveFilePicker 这个API可以写入一个文件 返回promise

js 复制代码
showSaveFilePicker().then(file=>{
  console.log(file);
})
相关推荐
IT_陈寒12 分钟前
JavaScript 性能优化:3个V8引擎隐藏技巧让你的代码提速50%
前端·人工智能·后端
沐怡旸27 分钟前
【技术选型】前端框架:Vue vs React - 组合式API与Hooks的哲学之争
前端·面试
charlie11451419142 分钟前
HTML 理论系统笔记2
前端·笔记·学习·html·基础·1024程序员节·原生
2501_938780281 小时前
Ionic + Angular 跨端实战:用 Capacitor 实现相机拍照功能并适配移动端
前端·数码相机·angular.js
m0_64880493_江哥1 小时前
Python实现随机选播视频的示例代码
前端·python·音视频
_大学牲1 小时前
禁止复制内容 🤔 那点事~
前端·chrome·程序员
申阳1 小时前
Day 1:耗时2小时,梳理并分享我作为全栈开发最依赖的“兵器库”
前端·后端·程序员
UIUV2 小时前
CSS 高级动画学习笔记 —— 从 “亲吻小球” 案例看 CSS 核心技术
前端·css
星链引擎2 小时前
智能聊天机器人 技术架构核心实现与场景化落地
前端
yoyoma2 小时前
彻底搞懂 JavaScript 闭包:原理、陷阱与内存优化全解析
前端·javascript