原生JS实现文件上传中图片的预显示，核心代码仅10行

最新推荐文章于 2022-07-22 20:44:49 发布

狮子座的程序员

最新推荐文章于 2022-07-22 20:44:49 发布

阅读量109

点赞数 2

分类专栏： # Web前端文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_42247720/article/details/121069475

版权

Web前端专栏收录该内容

28 篇文章 5 订阅

订阅专栏

实现效果

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        width: 100vw;
        height: 100vh;
        background: #ecf6f9;
    }
    main{
        width: 100%;
        height: 100%;
        display: grid;
        justify-items: center;
        align-items: center;
    }
    .img-warp{
        width: 40%;
        height: 60%;
    }
    .img-warp form{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 10% 90%;
        grid-column: 1;
    }
    .img-file-warp{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .img-preview-wrap{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #img-preview{
        max-width: 60%;
        max-height: 60%;
    }
</style>
<body>
    <main>
        <div class="img-warp">
            <form>
                <div class="img-file-warp">
                    <input id="img-file" class="img-file" type="file" onchange="previewImg()"/>
                </div>
                <div class="img-preview-wrap">
                    <img id="img-preview"/>
                </div>
            </form>
        </div>
    </main>
</body>
<script>
    function previewImg(){
        //获取图片
        const file = document.getElementById("img-file").files[0];

        /*
        通过FileReader把图片变为base64
         */

        //创建FileReader
        const reader = new FileReader();
        //reader读取图片
        reader.readAsDataURL(file);
        //当读取完成后调用onload函数，让图片的base64显示到img标签的的src属性中
        reader.onload = (event)=>{
            //把事件的result赋值给src，这个src就是转换成base64的路径了，小伙伴们可以cosole.log打印一下
            const src = event.target.result;
            //获取img-preview的img标签，把他的src设置成base64的地址，即可显示啦
            document.getElementById("img-preview").setAttribute("src",src);
        }
    }
</script>
</html>

实现原理

通过获取input的dom对象获取到图片文件后，利用FileReader函数，读取file文件后调用onload函数，通过获取event的result参数（base64的url），传递给img对象即可

狮子座的程序员

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
原生JS实现文件上传中图片的预显示，核心代码仅10行

实现效果实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传图片</title></head><style> *{ margin: 0; padding: 0; } body{ width: 100vw;
复制链接

扫一扫