JavaScript无法直接访问本地文件系统，需通过触发用户选择，利用FileList和FileReader读取文件内容，或用FormData+fetch上传文件；大文件可分片处理，注意安全限制与跨域配置。
JavaScript 本身不能直接访问用户本地文件系统（出于安全限制），但可以通过 让用户主动选择文件，然后用 File 和 FileReader API 读取内容，再通过 FormData + fetch 或 XMLHttpRequest 上传到服务器。
如何让用户选择并读取本地文件
核心是监听文件输入框的 change 事件，获取 FileList，再用 FileReader 异步读取：
- 使用
触发选择（可加multiple、accept属性限制类型） -
event.target.files是一个FileList，每个项是File对象（继承自Blob） - 用
FileReader的readAsText()（文本）、readAsDataURL()（Base64）、readAsArrayBuffer()（二进制）等方法读取 - 监听
onload获取结果，onerror处理失败
示例（读取文本文件）：
const input = document.getElementById('fileInput');
input.addEventListener('change', e => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
document.getElementById('output').textContent = reader.result;
};
reader.onerror = () => console.error('读取失败');
reader.readAsText(file, 'UTF-8');
});
立即学习“Java免费学习笔记（深入）”；
【极品模板】出品的一款功能强大、安全性高、调用简单、扩展灵活的响应式多语言企业网站管理系统。 产品主要功能如下： 01、支持多语言扩展（独立内容表，可一键复制中文版数据） 02、支持一键修改后台路径； 03、杜绝常见弱口令，内置多种参数过滤、有效防范常见XSS； 04、支持文件分片上传功能，实现大文件轻松上传； 05、支持一键获取微信公众号文章（保存文章的图片到本地服务器）； 06、支持一键
如何上传文件到服务器
读取不是必须步骤——如果只是上传，可跳过 FileReader，直接把 File 对象塞进 FormData：
-
FormData可以原生携带File或Blob，浏览器自动设置正确的Content-Type和边界（boundary） - 用
fetch发送 POST 请求，body直接传FormData实例（不用设Content-Type头，否则会出错） -
后端需按 multipart/form-data 解析（如 Express 用
multer，Node.js 原生需解析流）
示例（上传单个文件）：
const form = new FormData();form.append('upload', file); // 'upload' 是后端接收字段名
fetch('/api/upload', {
method: 'POST',
body: form
})
.then(res => res.json())
.then(data => console.log('上传成功:', data));
如何处理大文件或分片上传
避免内存溢出和超时，可将大文件切片（Blob.slice()），逐片上传并记录进度：
- 用
file.slice(start, end)获取子Blob（注意：返回的是Blob，不是File，但可直接 append 到 FormData） - 每片带上序号、总片数、文件唯一标识（如 hash），便于后端合并
- 结合
fetch的signal和AbortController支持取消 - 用
XMLHttpRequest.upload.onprogress获取上传进度（fetch目前不原生支持上传进度）
注意事项和常见问题
-
File对象只在用户触发选择后存在，刷新页面即丢失；如需持久化，得靠后端存储或 IndexedDB 缓存内容（非路径） - 不能读取或上传文件的绝对路径（出于隐私保护，
file.path在浏览器中始终为""） -
跨域上传需服务端配置 CORS（如
Access-Control-Allow-Origin），且带凭证时要设credentials: 'include' - 移动端要注意
accept属性对摄像头/相册的调用效果（如accept="image/*"可唤起拍照）
不复杂但容易忽略。
