当前位置:首页 > JavaScript

js实现文件夹

2026-01-16 12:29:41JavaScript

使用JavaScript创建文件夹

在浏览器端的JavaScript中无法直接操作文件系统创建文件夹,这是出于安全考虑。但在Node.js环境中可以通过文件系统模块(fs)实现。

Node.js中使用fs.mkdir()方法创建文件夹:

const fs = require('fs');

fs.mkdir('./newFolder', (err) => {
  if (err) throw err;
  console.log('文件夹创建成功');
});

递归创建多级目录

使用fs.mkdir()recursive选项可以创建多级目录:

fs.mkdir('./parent/child/grandchild', { recursive: true }, (err) => {
  if (err) throw err;
});

检查文件夹是否存在

创建前先检查文件夹是否存在:

fs.access('./folder', fs.constants.F_OK, (err) => {
  if (err) {
    fs.mkdir('./folder', (err) => {});
  }
});

浏览器中的替代方案

在浏览器中可以通过以下方式模拟:

  • 使用<input type="file" webkitdirectory>让用户选择文件夹
  • 通过IndexedDB存储分层数据模拟文件夹结构
  • 使用Web Storage API存储键值对

使用Promise版本

Node.js 10+支持Promise版本的fs模块:

const fs = require('fs').promises;

async function createFolder() {
  try {
    await fs.mkdir('./newFolder');
  } catch (err) {
    console.error(err);
  }
}

删除文件夹

删除文件夹使用fs.rmdir()

fs.rmdir('./folder', (err) => {
  if (err) throw err;
});

递归删除使用第三方模块如rimraf或Node.js 12.10+的fs.rm()

fs.rm('./folder', { recursive: true }, (err) => {});

js实现文件夹

标签: 文件夹js
分享给朋友:

相关文章

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swipe…

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.…

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https:/…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的H…

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以…

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Paren…