可通过 FileReader API 读取本地照片并预览或处理：一、用 accept=”image/*” 的 file 输入框选文件；二、readAsDataURL 生成 data URL 预览图像；三、readAsArrayBuffer 获取二进制数据用于分析压缩；四、readAsText 配合 EXIF 库解析元数据；五、监听 onprogress 和 onerror 处理进度与错误。
如果您希望在网页中通过 HTML5 技术读取用户本地设备上的照片文件，并在页面中预览或为后续上传做准备，则可以利用 FileReader API 实现文件内容的异步读取。以下是实现此功能的具体步骤：
一、通过 input[type=”file”] 选择照片文件
FileReader API 本身不负责获取文件，需先通过文件输入控件让用户选择图像文件。该控件支持限制文件类型与多选行为，确保仅接收图片格式。
1、在 HTML 中添加一个 type 为 file 的 input 元素，并设置 accept 属性为 image/*，限定只允许选择图片文件。
2、为该 input 元素绑定 change 事件监听器，以便在用户选择文件后立即触发处理逻辑。
立即学习 “ 前端免费学习笔记（深入）”；
3、在事件回调中，通过 event.target.files 获取 FileList 对象，从中提取第一个文件（File 实例）。
二、使用 FileReader 同步读取为 data URL 并显示预览
FileReader 可将 File 对象读取为 base64 编码 的 data URL，适用于快速生成图像预览。该方式无需服务器参与，所有操作在 浏览器 端完成。
1、创建新的 FileReader 实例：const reader = new FileReader();
2、为 reader 对象的 onload 事件绑定 回调函数，在该函数中获取 reader.result 属性值，即完整的 data URL 字符串。
3、将该 data URL 赋值给页面中 img 元素的 src 属性，即可实时渲染图像预览。
三、读取为 ArrayBuffer 进行二进制处理
当需要对图像原始 字节 进行分析、压缩、加密或构造自定义请求体时，应使用 readAsArrayBuffer 方法。该方式返回底层二进制数据，适合与 TypedArray 或 Blob 配合使用。
1、调用 reader.readAsArrayBuffer(file) 启动读取过程。
2、在 onload 回调中，通过 reader.result 获取 ArrayBuffer 实例。
3、使用 Uint8Array 或 DataView 对该 ArrayBuffer 进行访问，例如检查文件头字节以验证是否为合法 JPEG 或 PNG。
四、读取为文本并解析 EXIF 信息
部分照片嵌入了 EXIF 元数据（如拍摄时间、GPS 坐标、设备型号），可借助 readAsText 方法配合第三方库（如 exif-js）提取。注意需指定编码为 ISO-8859-1 或 binary，避免 UTF-8 解码破坏二进制结构。
1、调用 reader.readAsText(file, ‘ISO-8859-1’) 启动读取。
2、在 onload 回调中，将 reader.result 转换为 Uint8Array，再传入 EXIF.readFromBinaryFile 处理。
3、从解析结果中提取 EXIF.DateTime 或 EXIF.GPSInfo 等字段用于界面展示。
五、监听读取进度与错误处理
FileReader 提供 onprogress 和 onerror 事件，可用于反馈加载状态或捕获常见异常（如文件过大、权限拒绝、不支持格式）。
1、为 reader.onprogress 绑定函数，通过 event.loaded 与 event.total 计算当前读取百分比。
2、为 reader.onerror 绑定函数，在其中判断 event.target.error.code，区分 ABORT_ERR、NOT_READABLE_ERR、SECURITY_ERR 等不同错误类型。
3、在发生 NOT_READABLE_ERR 时，提示用户该文件可能已被移动、删除或受系统权限限制。
