图片上传前预览需求

图片上传前预览需求

很多业务场景下，我们需要在用户上传图片前，先预览待上传的图片

<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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容