html5通过file api和filesystem api实现本地文件操作：1. file api利用input或拖放获取文件，通过filereader读取内容，支持文本、数据url等格式；2. 拖拽功能提升用户体验，允许将文件直接拖入页面读取；3. filesystem api（实验性）可在沙盒中创建、读写文件，仅部分浏览器支持；注意事项包括安全限制、api兼容性及推荐使用native file system api替代方案。
HTML5 提供了 File API 和 FileSystem API，让网页可以读取用户本地文件并与本地文件系统进行有限交互。下面分别介绍如何使用这些 API 实现本地文件读取和文件系统操作。
1. 使用 File API 读取本地文件
File API 允许通过 input 元素或拖放操作获取用户选择的文件，并使用 FileReader 将其内容读取到内存中。
示例：通过 input 上传并读取文本文件
JavaScript 代码：
立即学习“前端免费学习笔记（深入）”；
<script><br> document.getElementById('fileInput').addEventListener('change', function(e) {<br> const file = e.target.files[0];<br> if (!file) return;<br> <br> const reader = new FileReader();<br> reader.onload = function(event) {<br> document.getElementById('output').textContent = event.target.result;<br> };<br> <br> reader.readAsText(file); // 以文本形式读取<br> });<br> </script>说明：
-
FileReader 支持多种读取方式：
readAsText()、readAsDataURL()（用于图片预览）、readAsArrayBuffer()等。 - 只能读取用户主动选择的文件，不能随意访问本地路径。
2. 拖拽文件读取（增强用户体验）
支持将文件拖入页面区域进行读取。
拖拽文件到这里
JavaScript 代码：
立即学习“前端免费学习笔记（深入）”；
<script><br> const dropZone = document.getElementById('dropZone');<br> const output = document.getElementById('output2');<br> <br> // 阻止默认行为<br> ['dragenter', 'dra<a style="color:#f60; text-decoration:underline;" title= "go" href="https://www.php.cn/zt/15863.html" target="_blank">gover', 'dragleave', 'drop'].forEach(eventName => {<br> dropZone.addEventListener(eventName, e => e.preventDefault());<br> });<br> <br> // 处理拖放<br> dropZone.addEventListener('drop', e => {<br> const file = e.dataTransfer.files[0];<br> if (!file) return;<br> <br> const reader = new FileReader();<br> reader.onload = () => {<br> output.textContent = reader.result;<br> };<br> reader.readAsText(file);<br> });<br> </script>3. 使用 FileSystem API（实验性，仅部分浏览器支持）
FileSystem API 可实现更深入的文件系统交互，如创建、写入、读取沙盒目录中的文件。注意：该 API 目前仅在基于 Chromium 的浏览器中部分支持（需启用 flag），且为实验性功能。
示例：请求文件系统并写入/读取文件
<script><br> function accessFS() {<br> if (!<a style="color:#f60; text-decoration:underline;" title= "win" href="https://www.php.cn/zt/19041.html" target="_blank">window.requestFileSystem) {<br> alert("您的浏览器不支持 FileSystem API");<br> return;<br> }<br> <br> // 请求持久化文件系统<br> window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;<br> window.requestFileSystem(window.TEMPORARY, 1024*1024, onFSGranted, onError);<br> }<br> <br> function onFSGranted(fs) {<br> console.log('文件系统已获取:', fs.root);<br> <br> // 写入文件<br> fs.root.getFile('test.txt', {create: true}, fileEntry => {<br> fileEntry.createWriter(w => {<br> const blob = new Blob(['Hello, FileSystem!'], { type: 'text/pl<a style="color:#f60; text-decoration:underline;" title= "ai" href="https://www.php.cn/zt/17539.html" target="_blank">ain' });<br> w.write(blob);<br> }, onError);<br> <br> // 读取文件<br> fileEntry.file(f => {<br> const r = new FileReader();<br> r.onload = () => console.log('读取内容:', r.result);<br> r.readAsText(f);<br> }, onError);<br> }, onError);<br> }<br> <br> function onError(e) {<br> console.error('文件系统错误:', e);<br> }<br> </script>
说明：
- TEMPORARY 或 PERSISTENT 存储类型。
- 文件存储在浏览器沙盒中，非真实本地路径。
- Chrome 中需启用
chrome://flags/#enable-experimental-web-platform-features才能使用。
注意事项
- 出于安全考虑，网页无法直接访问用户任意本地路径。
- File API 已广泛支持，适合读取用户授权的文件。
- FileSystem API 仍处于实验阶段，不适合生产环境。
- 现代替代方案包括：使用 showOpenFilePicker、showSaveFilePicker（基于 Native File System API）——需 HTTPS 和现代浏览器支持。
