图片上传前预览

最新推荐文章于 2019-08-06 16:54:53 发布

Saladbobo

最新推荐文章于 2019-08-06 16:54:53 发布

阅读量127

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Saladbobo/article/details/98211078

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图：

实现思路：

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>

Saladbobo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片上传前预览

效果图：实现思路：input 注册 onchange 事件，在 onchange 事件中获取图片文件，然后通过 FileReader 转换为 Base64 编码，然后修改img 的 src内容实现图片上传服务器前预览功能。代码：<!DOCTYPE html><html lang="zh"><head> <style&...
复制链接

扫一扫