JavaScript文件上传教程：FileAPI详解

本文深入浅出地讲解了如何在浏览器端安全、高效地实现文件上传与预览，聚焦于 JavaScript 的 File API 与 FormData 的实战结合：从通过 input[type="file"] 获取用户选择的文件、利用 FileReader 前端解析小文件内容，到使用 FormData 配合 fetch 完成带进度监听的上传流程，再到 URL.createObjectURL 快速预览和 Streams API 支持的分片上传等进阶技巧——所有操作均严格遵循用户主动触发的安全原则，既规避了直接读取本地文件的风险，又充分释放了现代浏览器 API 的能力，为开发者提供了一套完整、可靠且易于落地的文件处理解决方案。

JavaScript 本身不能直接读取或上传用户本地文件（出于安全限制），但可以通过浏览器提供的 File API 和 FormData 配合 XMLHttpRequest 或 fetch 实现安全、可控的文件上传流程。

如何用 input[type="file"] 获取文件

这是最常用入口。用户选择文件后，input 元素的 files 属性返回一个 FileList 对象（类似数组）：

• input.files[0] 可获取第一个选中文件（File 实例）
• File 继承自 Blob，拥有 name、size、type（MIME 类型）、lastModified 等属性
• 支持多选时，设置 multiple 属性，再遍历 files

用 FileReader 预览或读取文件内容

适合小文件（如图片预览、文本解析），不发请求，纯前端处理：

• 创建 new FileReader()
• 监听 load 事件：读取完成后，reader.result 包含结果（base64 或字符串）
• 常用方法：readAsDataURL()（转 base64）、readAsText()（文本）、readAsArrayBuffer()（二进制）
• 注意：大文件读取可能阻塞主线程，建议配合 AbortController 或分块读取

用 FormData + fetch 实现文件上传

这是现代推荐方式，简洁且支持进度监听：

• 新建 FormData 实例，用 .append("field", file) 添加文件（可附加其他字段）
• 调用 fetch(url, { method: 'POST', body: formData }) —— 不需设 Content-Type，浏览器自动加 multipart/form-data 边界
• 监听上传进度：通过 upload.onprogress（XMLHttpRequest）或使用 ReadableStream + TransformStream（fetch 高级用法，较复杂）
• 服务端需解析 multipart 数据（如 Express 中用 multer，Node.js 原生需流式解析）

File API 的其他实用接口

除了基础读写，还有更精细控制能力：

• URL.createObjectURL(file)：生成临时 blob URL，用于快速预览图片/视频（记得用完调 URL.revokeObjectURL() 释放内存）
• FileList 是只读类数组，不可直接修改；如需过滤或重组，可用 Array.from(files) 转为数组操作
• Drag & Drop 场景中，从 event.dataTransfer.files 同样获取 FileList
• 结合 Streams API 可实现分片上传、断点续传（例如每次读取 file.stream().getReader() 的 chunk）

不复杂但容易忽略：所有文件操作都依赖用户主动触发（如点击、拖入），不能自动读取路径或静默上传。安全边界清晰，功能足够支撑绝大多数上传需求。

今天关于《JavaScript文件上传教程：FileAPI详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！