<style> /* CSS代码如下*/ /* 修饰图片样式*/ img { width: 200px; height: 200px; border-radius: 50%; background-color: #dfdfdf; } </style> <body> <img src="" alt=""> <input type="file" > </body> <script> //js代码如下 //获取图片和表单元素dom节点 const img = document.querySelector('img'); let ipt = document.querySelector('input'); //添加元素监听事件 change事件在表单元素内容发生变化时触发 ipt.addEventListener('change',()=>{ //获取第一文件图片的地址渲染到页面 img.src = URL.createObjectURL(ipt.files[0]) }) </script>
1.未上传图片效果图
2.点击上传图片成功效果图
7632
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
