纯前端操作文件?

事情是这样的我发现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);
})
相关推荐
小飞悟6 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor7 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter8 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝9 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽10 分钟前
Cookie、Session、JWT 的前世今生
前端
程序员辉哥11 分钟前
学会在Cursor中使用Rules生成代码后可以躺平了吗?
前端·后端
请你吃div16 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试
一个水瓶座程序猿.17 分钟前
Vue3 中使用 Vueuse
前端·javascript·vue.js
夏梦春蝉17 分钟前
ES6从入门到精通:Symbol与迭代器
前端·javascript·es6
一个水瓶座程序猿.21 分钟前
ES6数组的`flat()`和`flatMap()`函数用法
前端·ecmascript·es6