上传图片

最新推荐文章于 2024-08-24 22:16:11 发布

mumu42

最新推荐文章于 2024-08-24 22:16:11 发布

阅读量224

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/mumu42/article/details/78204525

版权

H5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

            outline: none;

        }

        label{

            display: block;

            font-size: 50px;

            height:100px;

            color:#87CEFA;

            width:100px;

            text-align:center;

            line-height:100px;

            border:2px solid #87CEFA;

            border-radius:10px;

            margin: 100px 0 10px 100px;

        }

        input{

            display: none;

        }

        button{

            width: 50px;

            height: 50px;

            border:none;

            text-align:center;

            line-height:50px;

            margin: 0 125px;

        }

        img{

            display: block;

        }

    </style>

</head>

<body>

<label for="f">+</label>

<input type="file" id="f"/>

<button class="btn">预览</button>

<img src="" />

<script>

    var btn=document.querySelector("button");

    var img=document.querySelector("img");

    var fileDemo=document.querySelector("input");

    var timer=setInterval(function(){
        var fileR=new FileReader();

        var filName=fileDemo.files[0];

        fileR.readAsDataURL(filName);

        fileR.οnlοad=function(){

            img.src=fileR.result;

        }
        if(filName!=""){
            clearInterval(timer);
        }
    },500);

</script>

</body>

</html>