图片上传前预览

最新推荐文章于 2024-09-09 12:05:08 发布

Saladbobo

最新推荐文章于 2024-09-09 12:05:08 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/Saladbobo/article/details/98211078

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

效果图：

实现思路：

input 注册 onchange 事件，在 onchange 事件中获取图片文件，然后通过 FileReader 转换为 Base64 编码，然后修改img 的 src内容实现图片上传服务器前预览功能。

代码：

<!DOCTYPE html>

<html lang="zh">

<head>
    <style>
        .preview{
            background-color: #EEE;
            width: 120px;
            height: 120px;
        }
        img{
            width: 100%;
        }
    </style>
    <script type="text/javascript">
        function handleChange(input) {
            const files = input.files;
            let file = files[0];
            if (file) {
                let reader = new FileReader()
                reader.readAsDataURL(file)
                reader.onload = (e) => {
                    let result = e.target.result
                    document.getElementById('previewer').src = result
                }
            }

        }
    </script>
</head>

<body>
    <input type="file" name="img" className='fill' accept="image/*" onchange="handleChange(this)" />
    <div class="preview">
        <img id='previewer' src='' />
    </div>
</body>

</html>