在以前做前端文件上传功能时，我一直有个很头疼的问题：用户选择本地文件后，浏览器没办法直接预览，必须先上传到服务器，返回线上地址才能展示图片、读取文本内容。不仅体验差，还浪费服务器带宽，非常不优雅。
自从熟练使用 HTML5 File API 之后，我才发现浏览器原生能力其实非常强大。不需要任何后端接口、不需要上传服务器，纯前端代码就能实现本地图片预览、读取文本内容、获取文件大小、文件类型校验等常用功能。
现在几乎所有的文件上传、在线预览、前端文件解析场景，底层都是依赖 File API 实现的。今天我就结合项目实战，带大家从零手写一套可直接复用的「本地文件读取 + 图片预览」Demo，代码精简无冗余，新手也能轻松看懂。
一、简单聊聊 File API 的核心作用
HTML5 新增的 File API，专门用于浏览器端安全操作本地文件，它最大的价值就是 把文件处理能力下沉到前端。
我们常用的 input file 选择文件后，会返回 File 文件对象，包含文件名、大小、类型、修改时间等原生信息。再搭配 FileReader 阅读器，就能把文件转换成浏览器可识别的格式，比如 Base64、文本字符串、二进制数据，从而实现本地预览和解析。
而且整个过程都是在本地内存中完成，不会上传文件、不会泄露数据，安全性和体验都拉满，是前端文件业务的核心基础。
二、常用核心对象（项目高频使用）
不用记复杂概念，日常开发只用掌握两个核心对象就够了：
1. File 对象：用户选中的单个文件信息，包含 name、size、type、lastModified 等属性，用来做文件校验、规则判断。
2. FileReader 对象：文件读取器，负责把 File 文件转换成前端可用的数据格式，支持读取文本、图片 Base64 等。
三、完整实战 Demo：文件选择 + 信息获取 + 预览
下面给大家写一套我项目里常用的完整版代码，支持 读取本地文本文件、预览本地图片文件，自带文件大小、类型校验，可直接复制运行、嵌入项目。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 File API 本地文件预览实战</title> <style> .box { max-width: 600px; margin: 50px auto; padding: 0 20px; } input { margin-bottom: 20px; } #preview { margin-top: 20px; } #preview img { max-width: 100%; border-radius: 6px; } .info { color: #666; font-size: 14px; } </style> </head> <body> <div class="box"> <!-- 文件选择控件 --> <input type="file" id="fileInput"> <div class="info" id="fileInfo"></div> <div id="preview"></div> </div> <script> const fileInput = document.getElementById('fileInput'); const fileInfo = document.getElementById('fileInfo'); const preview = document.getElementById('preview'); // 监听文件选择事件 fileInput.addEventListener('change', function(e) { // 获取选中的文件对象 const file = e.target.files[0]; if (!file) return; // 展示文件基础信息 fileInfo.innerHTML = ` 文件名：${file.name} <br/> 文件大小：${(file.size / 1024).toFixed(2)} KB <br/> 文件类型：${file.type} `; // 初始化文件读取器 const reader = new FileReader(); // 判断是否为图片，实现预览 if (file.type.startsWith('image/')) { reader.readAsDataURL(file); // 读取成功回调 reader.onload = function() { preview.innerHTML = `<img src="${e.target.result}" alt="图片预览">`; } } else { // 读取文本文件内容 reader.readAsText(file); reader.onload = function() { preview.innerHTML = `<pre style="padding:10px;background:#f5f5f5">${reader.result}</pre>`; } } }) </script> </body> </html>四、核心代码逐段解析
很多新手复制完代码能用，但不懂原理，我简单拆解关键逻辑，方便大家二次改造。
首先是 e.target.files[0]，input file 选中文件后会返回一个文件列表伪数组，单文件上传直接取第 0 项即可拿到完整文件对象。
然后通过 file 对象的属性，就能轻松获取文件名、大小、类型，实现前端前置校验，比如限制文件大小、只允许上传图片、txt 文档等，提前拦截无效文件，减少服务器压力。
最核心的两个读取方法：
readAsDataURL()：将文件转为 Base64 地址，专门用于图片本地预览，不用请求服务器，加载速度极快。
readAsText()：将文件转为普通文本，适合读取 txt、json、md 等文本类文件内容。
最后在onload 回调中拿到读取结果，渲染到页面，就完成了整个预览流程。
五、开发中必加的文件校验（避坑重点）
真实项目中，绝对不能直接读取文件，必须加前置校验，我分享两个最常用的规则：
1. 限制文件大小：比如限制单文件不超过 2MB，超大文件提前拦截，避免页面卡顿。
2. 限制文件格式：通过 type 后缀判断，只允许业务需要的文件类型，杜绝非法文件上传。
大家可以在获取 file 对象后，自行添加判断逻辑，适配自己的业务需求。
六、日常开发适用场景
File API 不是冷门知识点，而是高频刚需能力：
头像裁剪预览、表单文件上传预览、在线文档预览、前端解析 Excel/TXT 数据、图片压缩预处理，底层全部依赖这套逻辑。吃透这个知识点，绝大多数前端文件业务都能轻松搞定。
七、总结
HTML5 File API 是前端进阶必备的原生技能，它让浏览器摆脱了“只能上传不能处理”的局限，实现了真正的前端文件本地化操作。
相比于依赖后端接口做预览，前端本地读取预览，体验更好、速度更快、成本更低。建议大家亲手敲一遍代码，彻底理解逻辑，后续开发文件相关业务就可以直接复用，大幅提升开发效率。
