无需登录 数据私有 本地保存

文件系统访问 API 沙盒 - 读写本地文件

开发工具 文件 File System Access 文件 演示
9
0
0
0
您的浏览器不支持 File System Access API。部分功能受限，请使用 Chrome 或 Edge 获得完整体验。已启用传统文件上传作为后备。
释放文件以打开
1

            

        

    


    
    

        就绪
        未打开文件
        |
        行: 1
        字符: 0
        |
        
    









    

        
常见问题与知识点

        

            

                

                    
                

                

                    
File System Access API 是一项现代浏览器 API，允许网页应用直接读写用户本地文件系统中的文件和目录。与传统的文件上传不同，该 API 支持流式读写、目录遍历、文件句柄持久化等高级功能，让 Web 应用拥有接近原生应用的本地文件操作能力。它于 2023 年成为 W3C 标准。

                

            

            

                

                    
                

                

                    
目前主要支持：Chrome 86+（含 Android 版）、Edge 86+、Opera 72+。Firefox 正在开发中但尚未正式支持，Safari（含 iOS）暂不支持。本工具在不支持的浏览器中会自动启用传统文件上传作为后备方案。

                

            

            

                

                    
                

                

                    
出于安全考虑，File System Access API 不暴露文件的完整系统路径。您只能获取文件名（如 document.txt），无法获得 /Users/xxx/Documents/ 这样的绝对路径。文件直接保存到用户选择的原始位置，或通过"另存为"对话框指定新位置。

                

            

            

                

                    
                

                

                    
权限遵循用户手势触发原则——必须由用户点击按钮等方式主动触发文件选择。同一会话内浏览器会记住已授予的权限。刷新页面后，内存中的文件句柄会丢失，但可通过 IndexedDB 持久化存储句柄，配合 requestPermission() 重新激活权限。本工具当前使用内存存储，刷新后需重新打开文件。

                

            

            

                

                    
                

                

                    
理论上支持所有文件类型。本工具默认以 UTF-8 编码读取文本文件，并提供十六进制视图用于查看二进制文件。建议文件大小不超过 20MB（打开时会提示确认）。超大文件可能导致浏览器性能下降。文本编辑器支持 .txt、.md、.json、.html、.css、.js、.py 等常见格式。

                

            

            

                

                    
                

                

                    
点击工具栏的"十六进制"按钮可切换视图。该模式以经典 hexdump 格式显示文件字节（偏移量 + 十六进制值 + ASCII 预览），适合检查二进制文件、调试编码问题或分析未知文件格式。该视图为只读模式，编辑需切回文本视图。显示上限为 500KB 以保证性能。

                

            

            

                

                    
                

                

                    
点击"目录"按钮选择一个本地文件夹，侧边栏将显示该目录下的文件和子目录。点击文件直接打开编辑，点击子目录进入浏览。顶部面包屑导航可快速返回上级目录。目录中的文件支持直接保存回原位置（拥有完整读写权限）。在移动端，侧边栏以抽屉式面板显示。

                

            

            

                

                    
                

                

                    

                        Ctrl+S / Cmd+S：保存文件

                        Ctrl+O / Cmd+O：打开文件

                        Ctrl+N / Cmd+N：新建文件

                        Ctrl+F / Cmd+F：打开搜索替换面板

                        Esc：关闭搜索面板

                        拖放文件到编辑区也可直接打开
                    

                

            

            

                

                    
                

                

                    
传统 <input type="file"> 只能复制文件内容到浏览器内存，无法写回原文件。File System Access API 获取的是文件句柄，支持直接读写原文件、流式操作大文件、遍历目录结构，且无需将整个文件加载到内存。这使得在线代码编辑器、图像处理工具等复杂应用成为可能。

                

            

            

                

                    
                

                

                    
该 API 设计了多层安全机制：①用户手势要求——必须由用户主动触发选择器；②权限对话框——浏览器会明确提示用户授权；③不暴露完整路径——防止隐私泄露；④同源策略——仅 HTTPS 或 localhost 环境可用；⑤权限时效性——长时间未使用需重新授权。这些设计在功能性和安全性之间取得了平衡。

                

            

        

        
        

        

            💡 提示：如需持久化文件句柄（刷新后保留），可在代码中使用 indexedDB 存储句柄。本工具侧重于演示核心功能，采用内存存储以保持简洁。完整实现可参考 Chrome 开发者文档。
        

    








 🔧 相关工具