JavaScript 读取本地图片并显示：完整指南

在网页开发中，我们经常需要处理用户上传的图片。JavaScript 提供了 FileReader 对象，可以让我们读取本地文件的内容，包括图片。

以下是使用 FileReader 对象读取本地图片并显示的完整步骤：

1. HTML 结构

首先，我们需要在 HTML 中添加一个文件选择按钮和一个用于显示图片的 <img> 标签：html 图片预览

<input type='file'> 创建一个文件选择按钮，accept='image/*' 限制用户只能选择图片文件。* <img> 标签用于显示选择的图片。

2. JavaScript 代码javascriptconst fileInput = document.getElementById('fileInput');const imagePreview = document.getElementById('imagePreview');

fileInput.addEventListener('change', function(event) { const file = event.target.files[0]; // 获取选择的文件 const reader = new FileReader(); // 创建 FileReader 对象

// 文件读取完成后触发的事件 reader.addEventListener('load', function() { imagePreview.src = reader.result; // 将图片数据URL设置为的 src });

// 读取文件内容为数据URL if (file) { reader.readAsDataURL(file); }});

代码解释：

获取文件选择按钮和 <img> 标签的 DOM 对象。2. 为文件选择按钮添加 change 事件监听器，当用户选择文件后触发。3. 在事件处理函数中，我们获取选择的第一个文件 (event.target.files[0])。4. 创建一个 FileReader 对象。5. 为 FileReader 对象添加 load 事件监听器，当文件读取完成后触发。6. 在 load 事件处理函数中，我们将 reader.result（读取到的文件数据URL）赋值给 <img> 标签的 src 属性，从而显示图片。7. 调用 reader.readAsDataURL(file) 方法读取文件内容，并将其转换为数据URL。

总结

通过以上步骤，我们就可以使用 JavaScript 读取本地图片文件并将其显示在网页上了。FileReader 对象为我们提供了读取文件内容的强大功能，可以应用于各种场景，例如图片预览、文件上传进度显示等。