JavaScript无法直接访问本地文件系统，需用户通过选择文件；先用FileReader异步读取内容（如readAsText），再用FormData+fetch上传原始File对象。
JavaScript 本身不能直接访问本地文件系统（出于安全限制），但可以通过用户主动选择文件（如 ）来读取其内容，再上传到服务器。整个流程分两步：**读取文件内容**（前端）和**上传文件**（前端发请求）。下面分别说明核心实现方式。
如何用 FileReader 读取文件内容
FileReader 是浏览器内置 API，用于异步读取用户选中的文件内容（文本、二进制等）。它不发送网络请求，只在前端解析文件。
监听 input[type="file"] 的 change 事件，获取 event.target.files[0] 创建 new FileReader() 实例 通过 readAsText()（文本）、readAsDataURL()（Base64）、readAsArrayBuffer()（二进制）等方法加载文件 在 onload 回调中获取结果：reader.result
示例（读取文本文件）：
const fileInput = document.getElementById(‘fileInput’);
const output = document.getElementById(‘output’);
fileInput.addEventListener(‘change’, e => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
output.textContent = reader.result; // 文件文本内容
};
reader.readAsText(file, ‘UTF-8’); // 指定编码避免乱码
});
如何上传文件（不刷新页面）
读取不是必须的——如果只是上传，可直接用 FormData + fetch 或 XMLHttpRequest 发送原始 File 对象。
立即学习“Java免费学习笔记（深入）”；
FormData 可自动处理 multipart/form-data 编码，无需手动构造请求体 将 File 对象 append 进 FormData，键名需与后端约定（如 "file"） 用 fetch 提交，服务端接收该字段即可
示例（上传文件）：
const file = fileInput.files[0];
if (!file) return;
const formData = new FormData();
formData.append(‘file’, file); // 后端通过 req.file 或 request.files.file 获取
fetch(‘/upload’, {
method: ‘POST’,
body: formData
})
.then(res => res.json())
.then(data => console.log(‘上传成功:’, data));
读取并上传的常见组合场景
有些需求需要先读取校验（如检查 CSV 格式、JSON 是否合法、图片尺寸），再上传；或读取后生成缩略图、计算哈希等。
先用 FileReader 读取为 ArrayBuffer，做前端校验或预处理 校验通过后，仍可用原 File 对象上传（不用转成 Blob 再传，避免重复内存占用） 若需修改内容（如压缩图片），可用 canvas 或第三方库生成新 Blob，再 append 到 FormData
注意：File 是 Blob 的子类，所以可直接当 Blob 使用；上传时推荐传原始 File，保留文件名和类型信息。
注意事项与兼容性
FileReader 和 FormData 在现代浏览器中支持良好（Chrome 7+、Firefox 4+、Edge 12+、Safari 6.1+）。需注意：
大文件读取可能阻塞主线程（建议用 readAsArrayBuffer + 流式处理或分块） 移动端需注意 accept 属性过滤类型（如 accept="image/*"）提升体验 上传时建议添加 onprogress 监听（XMLHttpRequest.upload.onprogress）或使用 fetch 配合 ReadableStream（较新）显示进度 服务端需配置好文件大小限制、MIME 类型白名单、临时存储路径等
以上就是Javascript如何实现文件上传_如何读取文件内容？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543843.html
微信扫一扫 
支付宝扫一扫 
