纯前端操作文件?

事情是这样的我发现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);
})
相关推荐
retun_true18 分钟前
Element UI 打包探索【2】
前端·javascript·node.js
王将近23 分钟前
Cesium实现3D热力图
前端·cesium
沉默璇年30 分钟前
react中的useCallback 有什么作用?
前端·react.js·前端框架
爱学习的执念31 分钟前
如何使用Jest测试你的React组件
前端·react.js·前端框架
少年姜太公34 分钟前
从0开始完全掌握JS中的原型
前端·javascript·程序员
乐容37 分钟前
react 中解决 类型“never”上不存在属性“value”。
前端·react.js·前端框架
木子七1 小时前
vue2-路由Router
前端·vue
知野小兔1 小时前
【Angular】eventDispatcher详解
前端·javascript·angular.js
苦逼的猿宝1 小时前
Echarts中柱状图完成横向布局
前端·javascript·echarts
禾戊之昂2 小时前
【Electron学习笔记(一)】Electron基本介绍和环境搭建
前端·javascript·electron·node.js