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 上传并读取文本文件
<input type="file" id="fileInput">
<pre id="output"></pre>
JavaScript 代码：
立即学习“前端免费学习笔记（深入）”；
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(event) {
document.getElementById('output').textContent = event.target.result;
};
reader.readAsText(file); // 以文本形式读取
});
</script>
说明：
-
FileReader 支持多种读取方式：
readAsText()、readAsDataURL()（用于图片预览）、readAsArrayBuffer() 等。
- 只能读取用户主动选择的文件，不能随意访问本地路径。
2. 拖拽文件读取（增强用户体验）
支持将文件拖入页面区域进行读取。
<div id="dropZone" style="border: 2px dashed #ccc; padding: 20px; text-align: center;">
拖拽文件到这里
</div>
<pre id="output2"></pre>
JavaScript 代码：
立即学习“前端免费学习笔记（深入）”；
<script>
const dropZone = document.getElementById('dropZone');
const output = document.getElementById('output2');
// 阻止默认行为
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropZone.addEventListener(eventName, e => e.preventDefault());
});
// 处理拖放
dropZone.addEventListener('drop', e => {
const file = e.dataTransfer.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
output.textContent = reader.result;
};
reader.readAsText(file);
});
</script>
3. 使用 FileSystem API（实验性，仅部分浏览器支持）
FileSystem API 可实现更深入的文件系统交互，如创建、写入、读取沙盒目录中的文件。注意：该 API 目前仅在基于 Chromium 的浏览器中部分支持（需启用 flag），且为实验性功能。
示例：请求文件系统并写入/读取文件
<button onclick="accessFS()">访问文件系统</button>
<script>
function accessFS() {
if (!window.requestFileSystem) {
alert("您的浏览器不支持 FileSystem API");
return;
}
// 请求持久化文件系统
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.TEMPORARY, 1024*1024, onFSGranted, onError);
}
function onFSGranted(fs) {
console.log('文件系统已获取:', fs.root);
// 写入文件
fs.root.getFile('test.txt', {create: true}, fileEntry => {
fileEntry.createWriter(w => {
const blob = new Blob(['Hello, FileSystem!'], { type: 'text/plain' });
w.write(blob);
}, onError);
// 读取文件
fileEntry.file(f => {
const r = new FileReader();
r.onload = () => console.log('读取内容:', r.result);
r.readAsText(f);
}, onError);
}, onError);
}
function onError(e) {
console.error('文件系统错误:', e);
}
</script>
说明：
-
TEMPORARY 或 PERSISTENT 存储类型。
- 文件存储在浏览器沙盒中，非真实本地路径。
- Chrome 中需启用
chrome://flags/#enable-experimental-web-platform-features 才能使用。
注意事项
- 出于安全考虑，网页无法直接访问用户任意本地路径。
- File API 已广泛支持，适合读取用户授权的文件。
- FileSystem API 仍处于实验阶段，不适合生产环境。
- 现代替代方案包括：使用 showOpenFilePicker、showSaveFilePicker（基于 Native File System API）——需 HTTPS 和现代浏览器支持。
基本上就这些。对于大多数场景，File API 配合 input 或拖放已足够。需要
持久化存储可结合 localStorage 或 IndexedDB。
以上就是html5使用file API读取本地文件 html5使用文件系统交互的示例的详细内容，更多请关注php中文网其它相关文章！
547
收藏
