JS实现input选择图片预览功能详解与代码示例

本文主要介绍了如何使用JavaScript实现HTML input元素的图片选择功能，并提供了一个实际的示例来展示这一过程。这个示例涉及HTML、CSS和JavaScript的结合，让用户能够通过点击按钮选择本地图片，同时在选择后实时预览所选图片。 HTML部分的核心是两个`<input>`标签：一个用于触发用户选择文件，类型为`button`，带有`onclick`事件处理函数，当用户点击按钮时会模拟点击`<input type="file">`元素；另一个隐藏的`<input type="file">`用于接收用户选择的文件，其`onchange`事件被用来触发图片预览功能。 CSS代码定义了按钮的样式，包括尺寸、颜色、边框、字体等，以及鼠标悬停时的视觉反馈。`<img>`标签则作为图片预览区域，初始设置了一个默认图片的URL。 JavaScript部分的关键是`changeToop()`函数，它会在用户选择文件后被调用。这个函数应该包含了获取`<input type="file">`的文件，读取文件内容（通常是二进制数据），然后使用FileReader API将图片数据转换为Image对象，并设置到`<img>`元素的`src`属性，从而实现图片的实时预览。 具体步骤如下： 1. 用户点击"选择文件"按钮，触发模拟的`<input type="file">`点击。 2. 当用户选择文件后，`<input type="file">`的`onchange`事件触发，`changeToop()`函数执行。 3. 在`changeToop()`函数中，获取`<input type="file">`的`files`属性，获取用户选择的第一个文件。 4. 使用FileReader对象读取文件内容，设置其`readAsDataURL()`方法读取为data URL（包含图片的Base64编码）。 5. 创建一个新的Image对象，设置其`src`属性为data URL，这会触发浏览器加载并显示图片。 6. 如果预览成功，图片将在`<img>`元素中显示出来。 整个过程实现了用户友好的图片选择和本地预览功能，适合各种网页应用，如上传图片前的预览检查，或者需要即时查看用户选择图片的场景。