如何通过HTML实现本地文件的读取与上传预览

必须通过用户主动触发的<input type="file">选择文件，再用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> 等，性能更好、支持流式加载。

立即学习“前端免费学习笔记（深入）”；

容易踩的坑：

• 每次调用 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);});

限制上传文件大小与类型：前端校验只是体验优化

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> 标签，得靠 <iframe> 或 PDF.js

浏览器对 PDF 的支持不统一：Chrome/Firefox 能用 <iframe src="blob:xxx"> 直接渲染，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 文件”，上传后再服务端转图或提供在线查看链接。