JavaScript文件上传与读取分两步：先用FileReader预览用户选择的文件，再用FormData上传。关键限制是JS无法直接访问磁盘，必须通过input[type=”file”]由用户触发选择，且需处理进度、错误及安全校验。
JavaScript 实现文件上传和读取主要分两步：前端获取并预览文件（用 FileReader），再通过 FormData 发送到后端。关键在于理解浏览器对本地文件的访问限制——JS 不能直接读磁盘，只能处理用户主动选择的文件对象。
用 input[type=”file”] 获取文件
这是起点，必须由用户触发选择操作，不能自动调用 click()（部分浏览器会拦截）：
HTML 中写：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 上传文件到服务器
这是实际提交文件的标准方式，兼容性好，支持多文件和额外字段：
立即学习“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如何实现文件上传和读取？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542796.html
微信扫一扫 
支付宝扫一扫 
