javaScript无法直接访问本地文件系统，需用户通过选择文件；先用FileReader异步读取内容（如readAsText），再用FormData+fetch上传原始File对象。
javascript 本身不能直接访问本地文件系统（出于安全限制），但可以通过用户主动选择文件（如 <input type="file">）来读取其内容，再上传到服务器。整个流程分两步：**读取文件内容**（前端）和**上传文件**（前端发请求）。下面分别说明核心实现方式。
如何用 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免费学习笔记（深入）”；
功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类
0 
-
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+）。需注意：