在以前做前端文件上传功能时我一直有个很头疼的问题用户选择本地文件后浏览器没办法直接预览必须先上传到服务器返回线上地址才能展示图片、读取文本内容。不仅体验差还浪费服务器带宽非常不优雅。自从熟练使用 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 langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML5 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 classbox !-- 文件选择控件 -- input typefile idfileInput div classinfo idfileInfo/div div idpreview/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 stylepadding: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 是前端进阶必备的原生技能它让浏览器摆脱了“只能上传不能处理”的局限实现了真正的前端文件本地化操作。相比于依赖后端接口做预览前端本地读取预览体验更好、速度更快、成本更低。建议大家亲手敲一遍代码彻底理解逻辑后续开发文件相关业务就可以直接复用大幅提升开发效率。 
长河君 · 2026/9/4 11:35:56 · 阅读 1.2k HTML5 File API 实战，浏览器端本地文件读取预览
在以前做前端文件上传功能时我一直有个很头疼的问题用户选择本地文件后浏览器没办法直接预览必须先上传到服务器返回线上地址才能展示图片、读取文本内容。不仅体验差还浪费服务器带宽非常不优雅。自从熟练使用 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 langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML5 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 classbox !-- 文件选择控件 -- input typefile idfileInput div classinfo idfileInfo/div div idpreview/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 stylepadding: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 是前端进阶必备的原生技能它让浏览器摆脱了“只能上传不能处理”的局限实现了真正的前端文件本地化操作。相比于依赖后端接口做预览前端本地读取预览体验更好、速度更快、成本更低。建议大家亲手敲一遍代码彻底理解逻辑后续开发文件相关业务就可以直接复用大幅提升开发效率。