html5怎么读取图片_html5用FileReader API读取本地图片显示或上传【读取】

可使用HTML5 FileReader API读取并处理用户选择的图片：先通过file input获取File对象，再用readAsDataURL预览或readAsArrayBuffer上传；需校验大小类型、监听onerror/onloadend确保流程可控。

如果您希望在网页中读取用户本地选择的图片文件，并将其显示在页面上或准备上传，则可以利用 HTML5 提供的 FileReader API 实现。以下是具体操作步骤：

一、通过 input[type="file"] 选择图片文件

FileReader API 本身不直接触发文件选择，需先借助 file 类型的 input 元素获取用户选中的图片文件对象。该元素会返回一个 FileList 对象，从中可提取单个 File 实例用于后续读取。

1、在 HTML 中添加一个 type 为 file 的 input 元素，并设置 accept 属性限制仅允许图片类型。

2、为该 input 元素绑定 change 事件监听器，以便在用户选择文件后立即响应。

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

3、在事件处理函数中，通过 event.target.files[0] 获取第一个选中的文件对象。

二、使用 FileReader.readAsDataURL() 将图片转为 Base64 字符串并显示

readAsDataURL 方法将文件读取为 data URL（即 Base64 编码格式），适用于快速预览图片。读取完成后，result 属性会包含完整的 data:image/xxx;base64,... 字符串，可直接赋值给 img 元素的 src 属性。

1、创建一个新的 FileReader 实例。

标签： html5 html 编码 app 回调函数