0
点赞
收藏
分享

微信扫一扫

HTML和JavaScript实现不上传图片的情况下预览图片的功能

在这个示例中,我们使用了HTML的<input>标签创建了一个文件输入框,用于选择图片文件。当用户选择一个图片文件时,JavaScript的FileReader对象会读取该文件,并将其转换为DataURL格式的字符串。然后,我们将这个字符串设置为<img>标签的src属性,从而实现图片预览的功能。

请注意,这个示例仅在客户端浏览器中运行,不涉及服务器端的上传操作。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Preview</title>
   <style>
        img {
            max-width: 300px;
            max-height: 300px;
        }
    </style>
</head>
<body>
   <input type="file" id="imageInput" accept="image/*">
    

    <img id="imagePreview" src="#" alt="Image Preview" style="display:none;">

   <script>
        document.getElementById("imageInput").addEventListener("change", function(event) {
            var file = event.target.files[0];
            var reader = new FileReader();

            reader.onload = function(event) {
                document.getElementById("imagePreview").style.display = "block";
                document.getElementById("imagePreview").src = event.target.result;
            };

            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>

举报

相关推荐

0 条评论