HTML5无法直接读取本地图片，必须通过选择后用FileReader解析，这是浏览器安全策略强制要求的；直接使用file:///路径会被拦截，仅静态资源加载（如）例外。
HTML5 本身不能直接读取本地文件系统里的图片，必须通过用户主动触发的 选择操作，再用 FileReader API 解析——这是浏览器安全模型强制要求的，没有绕过方法。
为什么不能直接用路径读取本地图片（如 file:///xxx.jpg）
现代浏览器禁止网页脚本直接访问本地文件路径，否则会严重破坏用户隐私和系统安全。即使你把图片放在同目录下，用 
File 对象流程。
- 直接写
file:///路径在 Chrome/Firefox 会触发net::ERR_FILE_NOT_FOUND或被跨域拦截 -
fetch("file:///...")和XMLHttpRequest均被浏览器明确拒绝 - Electron 或 WebView 环境除外，但那已不属于纯 HTML5 浏览器场景
正确做法：用 FileReader
用户点击选择后，拿到 File 实例，再用 FileReader 读成 data URL 预览，或读成 ArrayBuffer 做进一步处理。
@@##@@
-
accept="image/*"能限制文件类型，但不可靠，仍需 JS 二次校验file.type -
reader.result是字符串，readAsDataURL生成的是data:image/png;base64,...格式 - 大图（如 >5MB）用
readAsDataURL可能卡顿，此时建议改用readAsArrayBuffer+createObjectURL()
常见报错和坑点
实际开发中高频出问题的地方集中在权限、生命周期和格式误判上：
立即学习“前端免费学习笔记（深入）”；
- 控制台报
Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'→ 传了null或非File对象，检查e.target.files[0]是否存在 - 选完图片没反应 → 忘记给
绑定change事件，或用了click事件（错误） -
FileReader的onload是异步的，别在它外面直接读reader.result，否则是undefined - 移动端 iOS Safari 对某些 HEIC 格式返回空
type，需用file.name.split('.').pop().toLowerCase()辅助判断
真正难的不是代码怎么写，而是理解「浏览器永远不让你偷偷读用户硬盘」这个前提；所有看似绕路的设计（比如必须点选、必须事件驱动、不能自动触发），都是为这一个原则服务的。
