JavaScript实现文件上传与读取方法

有志者，事竟成！如果你在学习文章，那么本文《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 上传文件到服务器

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

• 新建表单数据：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实现文件上传与读取方法》文章吧，也可关注golang学习网公众号了解相关技术文章。