HTML5无法直接读取本地图片，必须通过选择后用FileReader解析，这是浏览器安全策略强制要求的；直接使用file:///路径会被拦截，仅静态资源加载（如）例外。

HTML5 本身不能直接读取本地文件系统里的图片，必须通过用户主动触发的 选择操作，再用 FileReader API 解析——这是浏览器安全模型强制要求的，没有绕过方法。

为什么不能直接用路径读取本地图片（如 file:///xxx.jpg）

现代浏览器禁止网页脚本直接访问本地文件路径，否则会严重破坏用户隐私和系统安全。即使你把图片放在同目录下，用 是可以显示的，但那属于静态资源加载；而「读取图片内容（比如获取像素、转 base64、上传前预览）」必须走 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() 辅助判断

真正难的不是代码怎么写，而是理解「浏览器永远不让你偷偷读用户硬盘」这个前提；所有看似绕路的设计（比如必须点选、必须事件驱动、不能自动触发），都是为这一个原则服务的。

https://www.php.cn/faq/2038098.html