JavaScript需用FileReader处理文件（如预览、校验），用FormData+fetch上传；File对象通过input[type="file"]的change事件获取，继承Blob，含name/size/type属性；FileReader读取异步，须监听load事件；上传时勿设Content-Type头。
JavaScript 本身不能直接把文件“上传到服务器”——它需要配合 FormData 和 fetch（或 XMLHttpRequest）完成上传；而读取和处理文件（比如预览图片、解析 CSV、校验大小/类型）则完全可以在前端用 FileReader 或 Blob API 完成，无需发请求。
如何用 input[type="file"] 拿到用户选中的文件
关键不是“获取路径”，而是拿到 File 对象——它继承自 Blob，有 name、size、type 等只读属性，且可直接用于上传或读取。
- 必须监听
change事件，而不是click：用户点击后选择文件才会触发 -
event.target.files是FileList（类数组），即使multiple未设，也得用[0]取第一个 - 如果用户取消选择或清空输入框，
files.length会是0，需做空值判断
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
if (e.target.files.length === 0) return;
const file = e.target.files[0];
console.log(file.name, file.size, file.type); // 如：photo.jpg, 245678, image/jpeg
});
如何用 FileReader 同步读取文件内容（不上传）
FileReader 是唯一能将 File 转为文本、Data URL 或 ArrayBuffer 的浏览器 API。注意：所有读取方法都是异步的，不能“同步返回结果”。
-
readAsText(file, encoding)：适合读取.txt、.json、.csv等文本文件，encoding默认UTF-8 -
readAsDataURL(file)：适合图片/音视频预览，返回 base64 字符串，但大文件会导致内存暴涨，慎用 -
readAsArrayBuffer(file)：适合二进制处理（如解析 Excel、校验哈希、压缩），后续需用Uint8Array操作 - 必须监听
load事件才能拿到结果：reader.result是最终数据
const reader = new FileReader();
reader.onload = () => {
const text = reader.result; // string
console.log(text.substring(0, 100)); // 前100字符
};
reader.readAsText(file, 'UTF-8');
如何用 FormData + fetch 实现真正上传
上传本质是构造一个 multipart/form-data 请求体。直接传 File 对象给 FormData.append() 即可，浏览器自动设置 boundary 和 Content-Type。
立即学习“Java免费学习笔记（深入）”；
- 不要手动设置
Content-Type请求头：否则会破坏 multipart 格式，导致后端收不到文件 - 后端接收字段名（如
avatar）必须和FormData.append('avatar', file)第一个参数一致 - 如需额外参数（如用户 ID），也用
append()加入，不要塞进 URL 或 headers - 上传大文件时建议监听
upload.onprogress，但fetch不支持原生进度，得用XMLHttpRequest或第三方库
const formData = new FormData();
formData.append('avatar', file); // 文件字段
formData.append('user_id', '123'); // 普通字段
fetch('/api/upload', {
method: 'POST',
body: formData // 不要加 headers: { 'Content-Type': ... }
})
.then(r => r.json())
.then(data => console.log('上传成功', data));
常见错误和边界情况
很多上传失败不是代码写错，而是忽略了浏览器或用户行为的限制：
- 本地双击 HTML 文件打开时，
file://协议下部分浏览器禁止FileReader读取（报SecurityError），必须起本地服务（如npx serve） -
file.type不可靠：用户可改后缀或伪造 MIME，必须后端二次校验；前端仅作快速过滤（如if (!file.type.startsWith('image/'))） - 大文件（>100MB）在读取时可能卡死 UI，应使用
slice()分块读取，或用Stream+ReadableStream（较新 API） - 移动端
input[type="file"]在 iOS 上不支持capture="camera"以外的摄像头调用，且部分安卓机型对accept属性支持不一
真正的难点不在“怎么传”，而在“传之前校验是否合理”和“传之后如何反馈状态”。比如拖拽区域、分片上传、断点续传、秒传，这些都建立在对 File 和 Blob 的扎实理解之上。
