J*aScript如何实现文件上传和读取？_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript如何实现文件上传和读取？

2025-12-16

浏览次数：次

返回列表

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

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

J*aScript 实现文件上传和读取主要分两步：前端获取并预览文件（用 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 查看详情站长俱乐部购物系统

立即学习“J*a免费学习笔记（深入）”；

新建表单数据：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/')）