JavaScript无法直接读写本地文件系统，需通过File API在用户主动选择文件后读取内容、获取元信息或配合Blob URL实现预览下载；核心是用户触发与浏览器沙箱内处理。
JavaScript 本身不能直接读写本地文件系统（出于安全限制），但可以通过 File API 在用户主动选择文件后，读取其内容、获取元信息，或配合 Blob URL 实现预览、下载等操作。核心是“用户触发 + 浏览器沙箱内处理”，不是随意访问硬盘。
1. 获取文件对象：通过 input[type=”file”] 或拖放
最常用方式是监听文件输入框的 change 事件：
HTML 中放一个 input 元素： JS 中获取选中的 File 对象（其实是 FileList）：
const input = document.getElementById('fileInput');input.addEventListener('change', (e) => { const file = e.target.files[0]; // File 对象，只读 if (file) { console.log(file.name); // 文件名 console.log(file.size); // 字节数 console.log(file.type); // MIME 类型，如 'image/png' console.log(file.lastModified); // 时间戳 }});
2. 读取文件内容：用 FileReader
FileReader 是异步读取文件内容的核心接口，支持文本、DataURL、ArrayBuffer 等格式：
const reader = new FileReader();reader.onload = () => { console.log(reader.result); // 字符串内容};reader.onerror = () => { console.error('读取失败');};reader.readAsText(file); // 开始读取
读为 base64 Data URL（适合图片预览）：reader.readAsDataURL(file) 读为二进制 ArrayBuffer（适合解析音视频、Excel 等）：reader.readAsArrayBuffer(file)
3. 预览图片：结合 Data URL 和 ![javascript如何操作文件_File API的基本用法是什么]()
无需上传服务器，就能在页面中即时显示用户选择的图片：
立即学习“Java免费学习笔记（深入）”；
reader.onload = () => { const img = document.getElementById('preview'); img.src = reader.result; // reader.result 是 data:image/...;base64,...};reader.readAsDataURL(file);
注意：FileReader 是一次性使用的，每次读新文件都要新建实例；且不能中断，也不支持进度监听（如需进度条，得用 fetch + ReadableStream 配合后端流式传输）。
4. 创建并下载文件：用 Blob + URL.createObjectURL
虽然不能写磁盘，但可以生成临时 Blob 并触发浏览器下载：
const content = 'Hello, File API!';const blob = new Blob([content], { type: 'text/plain' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'hello.txt';a.click();// 用完及时释放内存（重要！）URL.revokeObjectURL(url);
这个技巧常用于导出 JSON、生成 CSV、保存 canvas 图片等场景。
基本上就这些。File API 不复杂但容易忽略细节：比如必须用户交互触发、File 是只读的、FileReader 不可复用、Blob URL 需手动释放。掌握这几个关键点，就能稳妥完成前端常见的文件处理需求。
以上就是javascript如何操作文件_File API的基本用法是什么的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544140.html
微信扫一扫 
支付宝扫一扫 
