必须通过用户主动触发的选择文件，再用filereader或url.createobjecturl()读取内容；禁止js自动操作、伪造路径或依赖accept/max属性校验。
用 <input type="file"> 读取本地文件内容（非上传）
浏览器禁止网页直接访问本地文件系统，所以不能像 Node.js 那样用路径读文件。唯一合规方式是用户主动选择——靠 <input type="file"> 触发文件选取，再用 FileReader 解析内容。
常见错误是试图给 input 设置 value 或用 JS 模拟点击后自动读取：这在现代浏览器中会被阻止，且 value 是只读的、仅含文件名（无路径），无法构造绝对路径。
实操要点：
- 必须由用户真实交互触发（如点击按钮），不能用
click()自动调用（除非在用户手势事件内） -
input建议加accept属性缩小选择范围，比如accept=".txt,.json"，但不可靠，仍需 JS 校验file.type或扩展名 - 读取大文件时，
FileReader.readAsText()可能卡顿，优先考虑readAsArrayBuffer()+TextDecoder流式处理 - 别忘了监听
onload和onerror，FileReader错误不抛异常，只设error属性
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
console.log(reader.result); // 文本内容
};
reader.onerror = () => {
console.error('读取失败:', reader.error);
};
reader.readAsText(file, 'UTF-8');
});
预览图片/视频/音频：用 URL.createObjectURL() 而非 FileReader
对二进制媒体文件（image/*、video/*、audio/*），不用费劲转成 base64 或文本——URL.createObjectURL(file) 会生成一个临时内存 URL，可直接赋给 <img src>、<video src></video> 等，性能更好、支持流式加载。
容易踩的坑：
- 每次调用
createObjectURL都会占用内存，必须在不需要时调用URL.revokeObjectURL()清理，否则内存泄漏 - 不能把该 URL 存到后端或跨页面使用，它只在当前文档生命周期有效
- 某些旧版 Safari 对
video的src设置有延迟，建议先设置src再调load()方法触发元数据加载
const img = document.querySelector('img');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file || !file.type.startsWith('image/')) return;
<p>const url = URL.createObjectURL(file);
img.src = url;</p><p>// 清理：比如在新文件选中前或页面卸载时
img.onload = () => URL.revokeObjectURL(url);
});</p>
限制上传文件大小与类型：前端校验只是体验优化
input 的 accept 和 max（HTML5.2 提案，尚未广泛支持）仅影响文件选择框界面，不能阻止用户绕过。真正有效的校验必须在 JS 中检查 file.size 和 file.type，并给出明确反馈。
注意点：
-
file.type由浏览器根据文件扩展名或魔数推测，可能为空或伪造（如把 .exe 改名成 .jpg），不能用于安全判断 - 文件大小单位是字节，
10 * 1024 * 1024表示 10MB，别写成10MB字符串 - 若需多文件上传，
e.target.files是FileList，不是数组，要用Array.from()或展开运算符转成数组才能用map/filter
if (file.size > 5 * 1024 * 1024) {
alert('文件不能大于 5MB');
input.value = ''; // 清空 input，否则重复选同一文件不会触发 change
return;
}
上传前预览 PDF：没有原生 <pdf></pdf> 标签，得靠 <iframe></iframe> 或 PDF.js
浏览器对 PDF 的支持不统一：Chrome/Firefox 能用 <iframe src="blob:xxx"></iframe> 直接渲染，Safari 则常下载而非内嵌；且部分企业环境禁用内建 PDF 查看器。
稳妥做法是引入 pdfjs-dist，但它体积大（>2MB）。如果只要简单预览，可先尝试 iframe + blob: URL，失败再降级提示。
- PDF 文件必须是
application/pdf类型，否则iframe可能拒绝加载 - 用
URL.createObjectURL(new Blob([file], {type: 'application/pdf'}))确保 MIME 正确 - 不要把 PDF base64 直接塞进
src，长 base64 会导致内存暴涨和解析失败
复杂点在于：PDF.js 需要手动加载 worker、处理分页、缩放，而 iframe 方案连滚动条位置都难控制。多数场景下，真需要高质量预览就接受引入 PDF.js；否则，不如直接告诉用户“已选中 PDF 文件”，上传后再服务端转图或提供在线查看链接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
