可通过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 时，提示用户该文件可能已被移动、删除或受系统权限限制。