回答

在 HTML 中，当用户通过 <input type="file"> 元素选择图片文件后，可以通过 JavaScript 来设置 <img> 元素的 src 属性，从而实现预览图片的功能。以下是实现预览图片的步骤：

HTML 结构

<input type="file" id="uploadInput">
<img id="previewImage" src="#" alt="Preview Image">

<input type="file" id="uploadInput">：文件上传输入框，用户选择图片文件后会触发 change 事件。<img id="previewImage" src="#" alt="Preview Image">：用于显示预览图片的 <img> 元素，初始时 src 属性设置为 #，表示空白图像。JavaScript 实现预览功能

// 获取 input 元素
const input = document.getElementById('uploadInput');

// 监听 input 元素的 change 事件
input.addEventListener('change', function(event) {
    // 获取选中的文件
    const file = event.target.files[0];

    if (file) {
        // 使用 FileReader 读取文件内容
        const reader = new FileReader();

        // 当 FileReader 读取完成时触发
        reader.onload = function(e) {
            // 将读取的结果设置为 img 元素的 src 属性
            document.getElementById('previewImage').src = e.target.result;
        };

        // 读取文件内容
        reader.readAsDataURL(file);
    }
});

解释：

事件监听：使用 addEventListener 方法监听 <input> 元素的 change 事件，即当用户选择文件后触发。

获取文件：在事件处理函数中，通过 event.target.files[0] 获取用户选择的第一个文件对象（通常为图片文件）。

FileReader 读取文件：使用 FileReader 对象读取文件内容。FileReader 提供了多种方法来读取文件，其中 readAsDataURL() 方法可以将文件读取为 base64 编码的数据 URL。

设置预览图片：在 FileReader 的 onload 事件中，通过 e.target.result 获取读取的数据 URL，然后将其设置为 <img> 元素的 src 属性，即可实现预览效果。

这样，当用户选择图片文件后，图片就会显示在 <img> 元素中，实现了简单的预览功能。