JS实现照片预览

茶卡盐佑星_

于 2024-05-26 12:42:56 发布

阅读量453

点赞数 4

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/hexadecimal_001/article/details/139213346

版权

以下是一个简单的JS代码示例，用于实现照片预览功能：

<!DOCTYPE html>
<html>
<head>
    <title>Photo Preview</title>
    <script>
        function previewPhoto(event) {
            var reader = new FileReader();
            reader.onload = function(){
                var preview = document.getElementById('preview');
                preview.src = reader.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
</head>
<body>
    <input type="file" onchange="previewPhoto(event)">
    <br>
    <img id="preview" src="" alt="Preview">
</body>
</html>

使用以上代码，当用户选择图片文件后，该图片将在页面上实现预览。