如何通过HTML Input选择图片并在页面显示？原生前端实现解析

嘿，别担心，作为前端新手遇到这种问题太正常了！完全可以用原生HTML、CSS和JS实现这个功能，咱们先拆解你代码里的问题，再一步步讲清楚实现原理，最后给出可运行的修正代码～

你的代码里的几个关键问题 #

先看看为什么你的代码没生效：

• 函数名不匹配：HTML里的input用了onchange="readURL(this);"，但你JS里定义的函数是getImage，名字对不上，浏览器找不到对应的函数，自然不会执行。
• 误用了jQuery语法：你用了$('#placeholder')来操作DOM，但代码里没引入jQuery库，而且你想要原生JS实现，这部分得改成原生DOM操作。
• 代码位置错误：reader.readAsDataURL(input.files[0]);放在了if语句外面，如果用户没选文件（input.files为空），这里会直接报错，导致整个功能失效。

核心实现原理（原生JS） #

要实现本地图片预览，核心依赖FileReader API，这是浏览器提供的原生接口，用来读取本地文件内容。步骤如下：

1. HTML结构：
   • 一个<input type="file">：允许用户选择本地文件，通过accept="image/*"可以限制只能选择图片类型的文件。
   • 一个<img>标签：作为预览容器，用来展示选中的图片。
2. JS逻辑：
   • 监听input的change事件：当用户选择文件后触发。
   • 检查选中的文件：确认用户确实选了文件，并且是图片类型（可选，但更严谨）。
   • 创建FileReader实例：调用它的readAsDataURL()方法，把选中的图片文件转换成Data URL（一种base64编码的字符串，可以直接作为<img>的src值）。
   • 监听FileReader的load事件：当文件读取完成后，把result（也就是Data URL）赋值给<img>的src属性，就能看到预览图了。

修正后的完整代码 #

下面是修复后的代码，每一步都加了注释，方便你理解：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styleTake2.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script>
        // 定义和HTML中onchange对应的函数
        function readURL(input) {
            // 检查是否有选中的文件
            if (input.files && input.files[0]) {
                // 创建FileReader实例
                const reader = new FileReader();
                
                // 监听文件读取完成事件
                reader.onload = function(e) {
                    // 用原生DOM获取预览图片元素
                    const placeholder = document.getElementById('placeholder');
                    // 把读取到的Data URL赋值给src
                    placeholder.src = e.target.result;
                    // 设置图片尺寸（可选）
                    placeholder.width = 150;
                    placeholder.height = 200;
                };
                
                // 读取选中的文件，转换成Data URL
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</head>
<body>
    <header>
        <img src="assets/logo.png" class="logo">
        <ul class="top-bar">
            <li class="top-button">
                <i class="fa fa-upload"></i>
                <!-- 添加accept属性限制只选图片，函数名和JS里的一致 -->
                <input id="uploadFile" type="file" accept="image/*" onchange="readURL(this);" />
            </li>
            <li class="top-button">
                <i class="fa fa-save"></i>
                <button id="btnSave">Save image</button>
            </li>
        </ul>
    </header>
    
    <ul class="side-bar">
        <hr width="199px" style="margin-top:0px;">
        <li class="side-button">
            <i class="fa fa-magic"></i> Effects
        </li>
        <hr width="199px">
        <li class="side-button">
            <i class="fa fa-volume-off"></i> Sounds
        </li>
        <hr width="199px">
        <li class="side-button">
            <i class="fa fa-image"></i> Select background
        </li>
        <hr width="199px">
    </ul>
    
    <!-- 预览图片容器，初始src可以设为空或者默认占位图 -->
    <img id="placeholder" src="" alt="预览图片" />
</body>
</html>

额外的优化建议（可选） #

• 文件类型验证：可以在JS里检查选中文件的type属性，确保是图片（比如input.files[0].type.startsWith('image/')），如果不是可以给用户提示。
• 错误处理：监听FileReader的error事件，处理文件读取失败的情况（比如文件损坏）。
• 样式优化：可以给<img>设置默认的边框或背景，避免没选图时页面空白。

这样你就能完全理解每一步的逻辑，而不是复制粘贴啦～

内容的提问来源于stack exchange，提问作者Laurentiu Neacsu