上传图片

来源：互联网发布：手机加水印软件编辑：程序博客网时间：2024/05/19 14:15
<!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.onload=function(){            img.src=fileR.result;        }        if(filName!=""){            clearInterval(timer);        }    },500);</script></body></html>
阅读全文
0 0