图片上传前预览需求
很多业务场景下，我们需要在用户上传图片前，先预览待上传的图片
<body>
<input type="file">
<img src="" alt="">
</body>
</html>
<script>
const ipt = document.querySelector('input')
const img = document.querySelector('img')
ipt.addEventListener('change', (event) => {
// 获取当前图片信息
let file = event.target.files[0]
const reader = new FileReader()
// 转化使用bese64格式
reader.readAsDataURL(file)
// 成功后的回调
reader.onload = function () {
img.setAttribute('src',this.result)
}
})
</script>
网友评论