如何用HTML+JavaScript实现选择图片后实时预览功能？

以下是完整的HTML+JavaScript实现方案，包含样式布局，能让用户选中图片后在输入框右侧看到预览图：

<!DOCTYPE html>
<html>
<head>
    <style>
        .image-upload-group {
            display: flex;
            align-items: center;
            margin: 20px 0;
            gap: 12px;
        }
        #image-preview {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 4px;
            border: 1px solid #eee;
            display: none;
        }
        input[type="file"] {
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="image-upload-group">
        <input type="file" id="image-selector" accept="image/*">
        <img id="image-preview" alt="图片预览">
    </div>

    <script>
        const imageInput = document.getElementById('image-selector');
        const previewImg = document.getElementById('image-preview');

        imageInput.addEventListener('change', handleImageSelect);

        function handleImageSelect(e) {
            const selectedFile = e.target.files[0];
            // 未选择文件时清空预览
            if (!selectedFile) {
                previewImg.style.display = 'none';
                previewImg.src = '';
                return;
            }

            // 验证文件是否为图片
            if (!selectedFile.type.includes('image/')) {
                alert('请选择有效的图片文件');
                imageInput.value = ''; // 清空无效选择
                previewImg.style.display = 'none';
                return;
            }

            // 使用FileReader读取本地文件生成预览URL
            const reader = new FileReader();
            reader.onload = function(loadEvent) {
                previewImg.src = loadEvent.target.result;
                previewImg.style.display = 'block';
            };
            reader.readAsDataURL(selectedFile);
        }
    </script>
</body>
</html>

关键实现细节： #

• 布局控制：用flex布局让文件输入框和预览图横向排列，通过gap设置间距，保证预览图在输入框右侧。
• 文件类型校验：通过accept="image/*"在浏览器层面限制选择图片，再通过JS的file.type二次验证，避免用户绕过限制选择非图片文件。
• 本地预览核心：使用FileReader API读取选中的图片文件，将其转换为DataURL格式，赋值给<img>的src属性实现本地预览，无需上传到服务器。
• 交互优化：未选择文件或选择无效文件时，自动清空预览区域并提示用户，提升体验。

内容的提问来源于stack exchange，提问作者Dyari Dlshad