JavaScript如何实现文件上传和读取？

JavaScript文件上传与读取分两步：先用FileReader预览用户选择的文件，再用FormData上传。关键限制是JS无法直接访问磁盘，必须通过input[type="file"]由用户触发选择，且需处理进度、错误及安全校验。

JavaScript 实现文件上传和读取主要分两步：前端获取并预览文件（用 FileReader），再通过 FormData 发送到后端。关键在于理解浏览器对本地文件的访问限制——JS 不能直接读磁盘，只能处理用户主动选择的文件对象。

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

这是起点，必须由用户触发选择操作，不能自动调用 click()（部分浏览器会拦截）：

• HTML 中写：<input type="file" id="fileInput">
• JS 监听 change 事件：fileInput.addEventListener('change', handleFile)
• event.target.files 是 FileList 对象，可转为数组遍历：Array.from(event.target.files)

用 FileReader 读取文件内容（不上传）

适合预览文本、JSON、图片等小文件，注意它只在浏览器内存中处理，不发请求：

• 创建实例：const reader = new FileReader()
• 监听加载完成：reader.onload = () => console.log(reader.result)
• 常用读取方法：reader.readAsText(file)（文本）、reader.readAsDataURL(file)（Base64 图片）、reader.readAsArrayBuffer(file)（二进制）
• 读取大文件时建议用 readAsArrayBuffer 配合 Blob.slice() 分块处理，避免内存溢出

用 FormData 上传文件到服务器

这是实际提交文件的标准方式，兼容性好，支持多文件和额外字段：

站长俱乐部购物系统

功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类

0

查看详情

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

• 新建表单数据：const formData = new FormData()
• 添加文件：formData.append('file', file)（单个）或 formData.append('files', file, 'custom-name.jpg')（带自定义名）
• 添加其他字段：formData.append('desc', '用户头像')
• 发送请求：fetch('/upload', { method: 'POST', body: formData })（注意：不要设 Content-Type，浏览器会自动设置带 boundary）

上传进度与错误处理

提升用户体验的关键细节：

• 监听上传进度：fetch 本身不支持进度，改用 XMLHttpRequest 或封装 fetch + ReadableStream（较新）
• 简单方案：const xhr = new XMLHttpRequest(); xhr.upload.onprogress = e => { console.log((e.loaded / e.total * 100).toFixed(1) + '%') }
• 错误统一捕获：xhr.onerror、xhr.onload 判断 xhr.status，同时检查 file.size === 0 或类型是否符合要求（如 file.type.startsWith('image/')）

基本上就这些。核心是理清“选文件 → 读内容（可选）→ 构造数据 → 发请求”的链路，不复杂但容易忽略安全校验和用户体验细节。

以上就是JavaScript如何实现文件上传和读取？的详细内容，更多请关注php中文网其它相关文章！