如何用javascript处理文件_File API如何使用？-js教程-PHP中文网

如何用javascript处理文件_File API如何使用？

紅蓮之龍

发布： 2025-12-15 03:11:24

原创

679人浏览过

JavaScript 文件处理核心是通过获取 File 对象，用 FileReader 异步读取（支持文本、DataURL、ArrayBuffer），前端校验类型与大小，再用 FormData 配合 fetch 上传，需注重错误处理与真机测试。

如何用javascript处理文件_file api如何使用？

JavaScript 用 File API 处理文件，核心是通过 <input type="file"> 获取用户选择的文件对象，再用 FileReader 读取内容，或直接上传到服务器。关键不在于“能不能”，而在于“怎么安全、可控、有反馈地做”。

获取文件对象：从 input 元素开始

用户选文件后，input.files 返回一个 FileList（类似数组），每个项都是 File 对象，继承自 Blob，自带 name、size、type、lastModified 等属性。

监听 change 事件，避免用 click 或 submit 间接触发
检查 files.length > 0，防止用户取消选择后误操作
支持多选？加 multiple 属性，但注意 iOS Safari 对多图上传的支持有限

读取文件内容：用 FileReader 控制流程

FileReader 是异步读取的核心，不能直接 return 结果，必须靠事件回调。常用方法有：readAsText()、readAsDataURL()、readAsArrayBuffer()。

读文本（如 JSON、CSV）：用 readAsText(file, encoding)，推荐显式传 "UTF-8"
预览图片：用 readAsDataURL(file)，结果可直接赋给 <img src alt="如何用javascript处理文件_File API如何使用？" >
处理二进制或上传前处理：用 readAsArrayBuffer()，配合 Uint8Array 或 FileReader.result 转换
务必监听 onload（成功）、onerror（失败）、onprogress（大文件可显示加载进度）

校验与限制：别全交给后端

前端校验不是为了替代后端，而是提升体验、减少无效请求。

本地宝团购导航网站

本地宝团购导航网站v1.2是由本地宝提供API接口调取团购数据，使用本程不用管理接口、数据采集，只需将程序放在网站某文件夹或域名下。程序是经过SEO优化，对提升网站流量有很大帮助，如果你的网站支持rewrite伪静态的话，你可以开启伪静态功能。后台使用后台地址：http://域名/admin 帐号密码：jiahai jiahai

查看详情

立即学习“Java免费学习笔记（深入）”；

类型检查：用 file.type（MIME 类型）或 file.name.split('.').pop().toLowerCase() 判断扩展名，但注意 type 可被伪造，仅作提示
大小限制：if (file.size > 5 * 1024 * 1024) { alert('文件不能超过 5MB'); }
图片尺寸检测（需先读取）：用 readAsDataURL + Image 对象 onload 后读取 naturalWidth/naturalHeight

上传文件：FormData 是最简方案

不需要引入 axios 或 fetch 封装？原生 fetch + FormData 完全够用，且自动设置正确 Content-Type（multipart/form-data）。

创建 const formData = new FormData();
追加文件：formData.append('file', file);，多个文件用相同字段名即可
也可附加其他字段：formData.append('desc', '用户头像');
发送：fetch('/upload', { method: 'POST', body: formData })，不用设 headers
想监听上传进度？XMLHttpRequest 支持 upload.onprogress，fetch 目前不支持，需用 ReadableStream 分块上传（较复杂，一般场景不必要）