上传图片显示缩略图 js

要在网页中实现上传图片并显示缩略图的功能，可以使用JavaScript结合HTML和CSS来完成。以下是一个基本的实现步骤和示例代码：

基本概念

文件上传：用户通过<input type="file">元素选择本地图片文件。
FileReader API：用于读取用户选择的文件内容。
缩略图显示：将读取到的图片数据显示在页面上，通常使用<img>标签。

优势

用户体验好：用户可以即时看到上传的图片，无需等待服务器处理。
减少服务器负担：客户端处理图片显示，减轻服务器压力。
灵活性高：可以根据需要调整缩略图的尺寸和样式。

示例代码

以下是一个简单的示例代码，展示了如何实现上传图片并显示缩略图的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传并显示缩略图</title>
    <style>
        #thumbnail {
            max-width: 200px;
            max-height: 200px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <input type="file" id="fileInput" accept="image/*">
    <img id="thumbnail" src="" alt="缩略图">

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('thumbnail').src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>

解释

HTML部分：
- <input type="file" id="fileInput" accept="image/*">：文件输入框，accept="image/*"限制只能选择图片文件。
- <img id="thumbnail" src="" alt="缩略图">：用于显示缩略图的<img>标签。