当前位置： 首页 > news >正文

纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查)

news 2025/7/1 15:02:06

纯前端本地文件管理器（VSCode风格）(浏览器对本地文件增删改查)

简介

本项目为一个纯前端实现的本地文件管理器网页（index.html），可在 Chrome/Edge 浏览器中直接打开，具备类似 VSCode 的本地文件夹操作体验。
无需后端，所有功能均在浏览器端实现。

主要功能

  1. 选择本地文件夹

    • 用户点击左上角文件夹按钮，授权后可浏览和操作本地文件夹内容。

  2. 文件树展示

    • 以树形结构展示所选文件夹下的所有文件和子文件夹。
    • 文件夹和文件有不同图标区分。
    • 文件夹默认收缩，点击可展开/收缩子项。
    • 每个目录下，文件夹排在前，文件排在后，均按名称排序。

  3. 文件/文件夹操作

    • 新建文件、新建文件夹（在当前选中目录下）
    • 编辑文件（支持多语言代码高亮，编辑区为 CodeMirror 5）
    • 保存文件
    • 删除文件/文件夹（支持递归删除文件夹）
    • 重命名文件/文件夹（文件夹为递归复制+删除实现）

  4. 编辑器体验

    • 编辑区为 CodeMirror 5，支持多种主流编程语言高亮（js、py、html、css、md、c/c++/java等）。
    • 编辑区可编辑，支持行号、自动换行。
    • 保存按钮为图标形式，点击后将编辑内容写回本地文件。

  5. 界面与交互

    • 所有操作按钮均为小图标，无文字，简洁美观。
    • 文件树和编辑区自适应布局，支持多层嵌套目录。
    • 状态栏实时提示操作结果（如保存成功、删除失败等）。

技术说明

  • 前端技术：原生 HTML + CSS + JavaScript
  • 代码高亮：CodeMirror 5（通过 unpkg CDN 引入）
  • 本地文件操作：File System Access API（需用户授权，支持 Chrome/Edge）
  • 无需后端，所有数据均在本地浏览器内存和本地文件系统中操作

使用方法

  1. 用 Chrome 或 Edge 浏览器打开 index.html
  2. 点击左上角“选择文件夹”图标，授权访问本地文件夹
  3. 在左侧文件树中浏览、增删改查文件和文件夹
  4. 编辑文件后，点击保存图标即可写回本地

注意事项

  • 仅支持支持 File System Access API 的浏览器（如 Chrome、Edge）
  • 仅能操作用户授权的文件夹及其子文件
  • 由于浏览器安全限制，网页无法自动访问任意本地文件夹，需每次手动授权
  • 编辑器高亮支持的语言可根据需要扩展

依赖

  • CodeMirror 5
    通过 unpkg CDN 引入，无需本地安装

主要文件结构

  • index.html
    主页面，包含所有功能和样式，无需其他依赖文件

如需二次开发或自定义功能，可直接修改 index.html，所有逻辑均在本文件内实现。
如需支持更多语言高亮，可在 <head> 中引入更多 CodeMirror 5 的 mode 脚本。

代码如下 :

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>本地文件管理器 Demo</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f5f5f5; }header { background: #222; color: #fff; padding: 0.2em; text-align: center;  display: flex; justify-content: center; align-items: center;}#container { display: flex; height: 90vh; }#sidebar { width: 320px; background: #fff; border-right: 1px solid #ddd; overflow-y: auto; padding: 1em; }#main { flex: 1; padding: 1em; display: flex; flex-direction: column; }#fileTree ul { list-style: none; padding-left: 1em; }#fileTree li { margin: 2px 0; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; }#fileTree .row { display: flex; align-items: center; }#fileTree li.selected { background: #e0e7ff; }.actions { margin-left: auto; display: flex; }.actions button { background: none; border: none; padding: 2px; margin-right: 2px; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }.actions button:last-child { margin-right: 0; }.actions button svg { width: 18px; height: 18px; }#editor { flex: 1; width: 100%; margin-top: 1em; font-family: monospace; font-size: 1em; }#saveBtn { margin-top: 0.5em; background: none; border: none; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }#saveBtn svg { width: 22px; height: 22px; }.folder { font-weight: bold; }.file { color: #333; }.hidden { display: none; }#status { color: #888; font-size: 0.9em; margin-top: 0.5em; }#toolbar { margin-bottom: 1em; display: flex; }#toolbar button { background: none; border: none; margin-right: 0.5em; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }#toolbar button svg { width: 22px; height: 22px; }.tree-icon { width: 18px; height: 18px; margin-right: 4px; flex-shrink: 0; }.caret { width: 14px; height: 14px; margin-right: 2px; transition: transform 0.2s; }.caret.collapsed { transform: rotate(-90deg); }.caret.expanded { transform: rotate(0deg); }.caret.invisible { opacity: 0; }</style><!-- CodeMirror 5 --><link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.16/lib/codemirror.css"><script src="https://unpkg.com/codemirror@5.65.16/lib/codemirror.js"></script><script src="https://unpkg.com/codemirror@5.65.16/mode/javascript/javascript.js"></script><script src="https://unpkg.com/codemirror@5.65.16/mode/python/python.js"></script><script src="https://unpkg.com/codemirror@5.65.16/mode/htmlmixed/htmlmixed.js"></script><script src="https://unpkg.com/codemirror@5.65.16/mode/css/css.js"></script><script src="https://unpkg.com/codemirror@5.65.16/mode/xml/xml.js"></script><script src="https://unpkg.com/codemirror@5.65.16/mode/markdown/markdown.js"></script><script src="https://unpkg.com/codemirror@5.65.16/mode/clike/clike.js"></script>
</head>
<body><header><h2>本地文件管理器 Demo</h2><div>（仅支持 Chrome/Edge，需授权访问本地文件夹）</div></header><div id="container"><div id="sidebar"><div id="toolbar"><button id="pickFolderBtn" title="选择文件夹"><svg viewBox="0 0 20 20" fill="none"><path d="M2 5a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5z" stroke="#333" stroke-width="1.5"/></svg></button><button id="newFileBtn" title="新建文件" disabled><svg viewBox="0 0 20 20" fill="none"><path d="M4 4h8l4 4v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" stroke="#333" stroke-width="1.5"/><path d="M12 4v4h4" stroke="#333" stroke-width="1.5"/><path d="M10 9v6" stroke="#333" stroke-width="1.5"/><path d="M7 12h6" stroke="#333" stroke-width="1.5"/></svg></button><button id="newFolderBtn" title="新建文件夹" disabled><svg viewBox="0 0 20 20" fill="none"><path d="M2 6a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6z" stroke="#333" stroke-width="1.5"/><path d="M7 10h6" stroke="#333" stroke-width="1.5"/><path d="M10 7v6" stroke="#333" stroke-width="1.5"/></svg></button></div><div id="fileTree"></div></div><div id="main"><div id="fileInfo"></div><textarea id="editor" class="hidden" style="height: 100%; min-height: 300px;"></textarea><button id="saveBtn" class="hidden" title="保存"><svg viewBox="0 0 20 20" fill="none"><path d="M4 4h12v12H4V4z" stroke="#333" stroke-width="1.5"/><path d="M7 4v4h6V4" stroke="#333" stroke-width="1.5"/><path d="M7 12h6" stroke="#333" stroke-width="1.5"/></svg></button><div id="status"></div></div></div><script>let rootHandle = null;let currentFileHandle = null;let currentDirHandle = null;let selectedLi = null;const pickFolderBtn = document.getElementById('pickFolderBtn');const newFileBtn = document.getElementById('newFileBtn');const newFolderBtn = document.getElementById('newFolderBtn');const fileTree = document.getElementById('fileTree');const editorTextarea = document.getElementById('editor');const saveBtn = document.getElementById('saveBtn');const fileInfo = document.getElementById('fileInfo');const status = document.getElementById('status');let cm = null;// 语言模式映射function getMode(filename) {const ext = filename.split('.').pop().toLowerCase();if (["js", "jsx", "ts", "tsx", "cjs", "mjs"].includes(ext)) return "javascript";if (["py"].includes(ext)) return "python";if (["html", "htm"].includes(ext)) return "htmlmixed";if (["css", "scss", "less"].includes(ext)) return "css";if (["json"].includes(ext)) return "javascript";if (["md", "markdown"].includes(ext)) return "markdown";if (["c", "cpp", "h", "hpp", "java"].includes(ext)) return "clike";return "javascript"; // 默认js}// 初始化CodeMirror 5function showEditor(text, filename) {editorTextarea.classList.remove('hidden');if (cm) {cm.toTextArea();cm = null;}cm = CodeMirror.fromTextArea(editorTextarea, {value: text,mode: getMode(filename),lineNumbers: true,lineWrapping: true,theme: 'default',indentUnit: 2,tabSize: 2,autofocus: true,});cm.setValue(text);setTimeout(() => cm.refresh(), 0);}// 工具函数function escapeHtml(str) {return str.replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}// 选择文件夹pickFolderBtn.onclick = async () => {try {rootHandle = await window.showDirectoryPicker();fileTree.innerHTML = '';await renderTree(rootHandle, fileTree);status.textContent = '已选择文件夹';newFileBtn.disabled = false;newFolderBtn.disabled = false;hideEditor();fileInfo.textContent = '';} catch (e) {status.textContent = '未选择文件夹';}};// 渲染文件树async function renderTree(dirHandle, container, path = '', collapsed = true) {container.innerHTML = '';const ul = document.createElement('ul');// 收集所有 entriesconst entries = [];for await (const [name, handle] of dirHandle.entries()) {entries.push({ name, handle });}// 文件夹在前，文件在后，按名称排序entries.sort((a, b) => {if (a.handle.kind !== b.handle.kind) {return a.handle.kind === 'directory' ? -1 : 1;}return a.name.localeCompare(b.name, 'zh-Hans-CN');});for (const { name, handle } of entries) {const li = document.createElement('li');const row = document.createElement('div');row.className = 'row';// 图标let icon;if (handle.kind === 'directory') {icon = document.createElement('span');icon.innerHTML = `<svg class="tree-icon" viewBox="0 0 20 20" fill="none"><rect x="3" y="5" width="14" height="10" rx="2" stroke="#fbbf24" stroke-width="1.5" fill="#fde68a"/></svg>`;} else {icon = document.createElement('span');icon.innerHTML = `<svg class="tree-icon" viewBox="0 0 20 20" fill="none"><rect x="4" y="3" width="12" height="14" rx="2" stroke="#60a5fa" stroke-width="1.5" fill="#dbeafe"/></svg>`;}// 展开/收缩箭头let caret = null;if (handle.kind === 'directory') {caret = document.createElement('span');caret.innerHTML = `<svg class="caret collapsed" viewBox="0 0 20 20"><polyline points="7,8 13,10 7,12" fill="none" stroke="#888" stroke-width="2"/></svg>`;caret.classList.add('caret', 'collapsed');} else {caret = document.createElement('span');caret.classList.add('caret', 'invisible');}row.appendChild(caret);row.appendChild(icon);// 名称const nameSpan = document.createElement('span');nameSpan.textContent = name;nameSpan.style.flex = '1';nameSpan.style.userSelect = 'none';nameSpan.className = handle.kind;row.appendChild(nameSpan);li.title = name;li.dataset.path = path + '/' + name;li.classList.add(handle.kind);// 操作按钮const actions = document.createElement('span');actions.className = 'actions';if (handle.kind === 'file') {const editBtn = document.createElement('button');editBtn.title = '编辑';editBtn.innerHTML = `<svg viewBox="0 0 20 20"><path d="M4 13.5V16h2.5l7.1-7.1a1 1 0 0 0 0-1.4l-2.1-2.1a1 1 0 0 0-1.4 0L4 13.5z" stroke="#333" stroke-width="1.2" fill="#fffbe6"/></svg>`;editBtn.onclick = e => { e.stopPropagation(); openFile(handle, li); };actions.appendChild(editBtn);}const renameBtn = document.createElement('button');renameBtn.title = '重命名';renameBtn.innerHTML = `<svg viewBox="0 0 20 20"><path d="M4 13.5V16h2.5l7.1-7.1a1 1 0 0 0 0-1.4l-2.1-2.1a1 1 0 0 0-1.4 0L4 13.5z" stroke="#6366f1" stroke-width="1.2" fill="#eef2ff"/></svg>`;renameBtn.onclick = e => { e.stopPropagation(); renameEntry(handle, dirHandle, name); };actions.appendChild(renameBtn);const delBtn = document.createElement('button');delBtn.title = '删除';delBtn.innerHTML = `<svg viewBox="0 0 20 20"><rect x="5" y="7" width="10" height="8" rx="2" stroke="#ef4444" stroke-width="1.5" fill="#fee2e2"/><path d="M8 9v4M12 9v4" stroke="#ef4444" stroke-width="1.2"/></svg>`;delBtn.onclick = e => { e.stopPropagation(); deleteEntry(handle, dirHandle, name); };actions.appendChild(delBtn);row.appendChild(actions);li.appendChild(row);// 点击选中/展开收缩if (handle.kind === 'directory') {let expanded = false;let subUl = document.createElement('ul');subUl.style.display = 'none';li.appendChild(subUl);nameSpan.onclick = async e => {e.stopPropagation();expanded = !expanded;if (expanded) {caret.classList.remove('collapsed');caret.classList.add('expanded');subUl.style.display = '';await renderTree(handle, subUl, path + '/' + name, false);} else {caret.classList.remove('expanded');caret.classList.add('collapsed');subUl.style.display = 'none';}};// 支持选中li.onclick = e => {e.stopPropagation();if (selectedLi) selectedLi.classList.remove('selected');li.classList.add('selected');selectedLi = li;currentDirHandle = handle;currentFileHandle = null;hideEditor();fileInfo.textContent = '文件夹: ' + name;};} else {// 文件点击选中并编辑nameSpan.onclick = e => {e.stopPropagation();openFile(handle, li);};}ul.appendChild(li);}container.appendChild(ul);}// 打开文件async function openFile(fileHandle, li) {try {const file = await fileHandle.getFile();const text = await file.text();showEditor(text, file.name);saveBtn.classList.remove('hidden');fileInfo.textContent = '文件: ' + file.name;currentFileHandle = fileHandle;currentDirHandle = null;if (selectedLi) selectedLi.classList.remove('selected');if (li) { li.classList.add('selected'); selectedLi = li; }} catch (e) {status.textContent = '无法打开文件: ' + e.message;}}// 保存文件saveBtn.onclick = async () => {if (!currentFileHandle) return;try {const writable = await currentFileHandle.createWritable();const value = cm ? cm.getValue() : '';await writable.write(value);await writable.close();status.textContent = '保存成功';} catch (e) {status.textContent = '保存失败: ' + e.message;}};// 新建文件newFileBtn.onclick = async () => {if (!rootHandle) return;let dir = currentDirHandle || rootHandle;const name = prompt('输入新文件名:');if (!name) return;try {const fileHandle = await dir.getFileHandle(name, { create: true });await renderTree(rootHandle, fileTree);status.textContent = '新建文件成功';// 新建后自动打开openFile(fileHandle, null);} catch (e) {status.textContent = '新建文件失败: ' + e.message;}};// 新建文件夹newFolderBtn.onclick = async () => {if (!rootHandle) return;let dir = currentDirHandle || rootHandle;const name = prompt('输入新文件夹名:');if (!name) return;try {await dir.getDirectoryHandle(name, { create: true });await renderTree(rootHandle, fileTree);status.textContent = '新建文件夹成功';} catch (e) {status.textContent = '新建文件夹失败: ' + e.message;}};// 删除文件/文件夹async function deleteEntry(handle, parentHandle, name) {if (!confirm('确定要删除 ' + name + ' 吗？')) return;try {await parentHandle.removeEntry(name, { recursive: handle.kind === 'directory' });await renderTree(rootHandle, fileTree);status.textContent = '删除成功';hideEditor();fileInfo.textContent = '';} catch (e) {status.textContent = '删除失败: ' + e.message;}}// 重命名文件/文件夹async function renameEntry(handle, parentHandle, oldName) {const newName = prompt('输入新名称:', oldName);if (!newName || newName === oldName) return;try {// 只能通过新建+复制+删除实现if (handle.kind === 'file') {const file = await handle.getFile();const newHandle = await parentHandle.getFileHandle(newName, { create: true });const writable = await newHandle.createWritable();await writable.write(await file.text());await writable.close();} else {// 文件夹递归复制await copyDirectory(handle, parentHandle, newName);}await parentHandle.removeEntry(oldName, { recursive: true });await renderTree(rootHandle, fileTree);status.textContent = '重命名成功';} catch (e) {status.textContent = '重命名失败: ' + e.message;}}// 递归复制文件夹async function copyDirectory(srcHandle, destParent, newName) {const newDir = await destParent.getDirectoryHandle(newName, { create: true });for await (const [name, handle] of srcHandle.entries()) {if (handle.kind === 'file') {const file = await handle.getFile();const newFile = await newDir.getFileHandle(name, { create: true });const writable = await newFile.createWritable();await writable.write(await file.text());await writable.close();} else {await copyDirectory(handle, newDir, name);}}}// 隐藏编辑器function hideEditor() {if (cm) {cm.toTextArea();cm = null;}editorTextarea.classList.add('hidden');}</script>
</body>
</html>
http://www.lryc.cn/news/578178.html

相关文章：

  • DAY 45 Tensorboard使用介绍
  • 2 大语言模型基础-2.2 生成式预训练语言模型GPT-2.2.2 有监督下游任务微调-Instruct-GPT强化学习奖励模型的结构改造与维度转换解析
  • 高效读取文件中指定行段的两种方法
  • 矩阵方程 线性代数
  • EA自动交易完全指南：从策略设计到实盘部署
  • 区块链技术有哪些运用场景？
  • CppCon 2018 学习:A Little Order! Delving into the STL sorting algorithms
  • 《如何在 Spring 中实现 MQ 消息的自动重连：监听与发送双通道策略》
  • mkyaffs2img 的 命令行工具的编译
  • Dubbo3高并发控制实战技巧
  • SCAU期末笔记 - 操作系统 选填题
  • QT中QSS样式表的详细介绍
  • localStorage 和 sessionStorage
  • Python + Selenium 自动化爬取途牛动态网页
  • 在vue当中使用动画
  • Hily×亚矩云手机：社交元宇宙的“云端心跳加速器”
  • JVM 垃圾回收（GC）笔记
  • LLaMA-Factory框架之参数详解
  • Webpack原理剖析与实现
  • 1.1_2 计算机网络的组成和功能
  • FastDFS分布式储存
  • 华为云Flexus+DeepSeek征文 | ​​接入华为云ModelArts Studio大模型 —— AI智能法务解决方案革新法律实践​
  • 38.docker启动python解释器，pycharm通过SSH服务直连
  • ERP系统Bug记录
  • 前端Vue面试八股常考题（一）
  • 中证500股指期货一手多少钱呢？风险如何？
  • HTML5 实现的圣诞主题网站源码，使用了 HTML5 和 CSS3 技术，界面美观、节日氛围浓厚。
  • 华为云 Flexus+DeepSeek 征文｜基于 Dify 平台开发智能客服 AI Agent 的完整实战指南
  • 【STM32HAL-第1讲 基础篇-单片机简介】
  • 前端开发面试题总结-原生小程序部分