JavaScript无法直接读写本地文件系统，需通过File API让用户主动选择文件，利用<input type="file">获取File对象，再用FileReader异步读取内容，或通过FormData上传至服务器，并支持预览、校验等前端处理。
JavaScript 本身不能直接读写本地文件系统（出于安全限制），但可以通过 File API 在浏览器中安全地访问用户主动选择的文件，实现上传、预览、校验和简单处理。核心是让用户通过 <input type="file"> 选择文件，再用 JavaScript 读取其内容或元数据。
获取用户选择的文件
使用 <input type="file"> 触发文件选择，通过 files 属性获取 FileList 对象：
-
input.files是只读类数组对象，每个项是File实例（继承自Blob） -
File对象包含name、size、type（MIME 类型）、lastModified等属性 - 支持多选时添加
multiple属性：<input type="file" multiple>
用 FileReader 读取文件内容
FileReader 用于异步读取文件内容，支持文本、DataURL、ArrayBuffer 等格式：
-
readAsText(file, encoding)→ 读为字符串（如 UTF-8） -
readAsDataURL(file)→ 生成 base64 字符串（适合图片预览） -
readAsArrayBuffer(file)→ 读为二进制缓冲区（适合解析 Excel、音频等） - 监听
onload获取结果：reader.result；监听onerror捕获失败
上传文件到服务器
通常用 FormData 封装文件，配合 fetch 或 XMLHttpRequest 提交：
立即学习“Java免费学习笔记（深入）”；
- 创建
FormData实例，用.append('field', file)添加文件（可附加其他字段） -
fetch('/upload', { method: 'POST', body: formData })—— 注意不要设置Content-Type，浏览器会自动添加带 boundary 的 multipart/form-data - 服务端需解析 multipart 数据（如 Node.js 用
multer，Python 用request.files）
前端简单校验与处理
可在上传前做轻量级检查，提升体验和安全性：
- 检查
file.size是否超限（如if (file.size > 5 * 1024 * 1024) {...}） - 验证
file.type（如file.type.startsWith('image/')） - 用
URL.createObjectURL(file)快速生成临时 URL 预览图片或视频（记得用完调用URL.revokeObjectURL()释放内存） - 对文本文件可读取后做关键词过滤、JSON 格式校验等
不复杂但容易忽略：File API 所有操作都是用户触发的，没有“静默读取”；所有读取都异步，避免阻塞主线程；大文件建议分片上传或加进度条反馈。
