H5 选择图片后预览

最新推荐文章于 2024-09-05 16:19:18 发布

高冷的钢背兽

最新推荐文章于 2024-09-05 16:19:18 发布

阅读量632

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： H5图片预览

本文链接：https://blog.youkuaiyun.com/bitcser/article/details/116493419

前端专栏收录该内容

33 篇文章

订阅专栏

本文介绍了在H5中如何实现图片选择后本地预览及上传功能，通过使用HTML的file输入元素结合FileReader API，将选中的图片文件转换为Base64编码，从而实现在页面上直接显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5很多时候选择完图片需要先预览下本地的图片，同时上传

<input type="file" class="file" name="file" />
<img src="" alt="" />

拿到files里的file文件后，将file对象转base64方法

 
        //将file对象转化为base64
        function previewFile(file) {
          let reader
          if (file) {
            // 创建流对象
            reader = new FileReader()
            reader.readAsDataURL(file)
          }
          // 捕获 转换完毕
          reader.onload = function(e) {
            // 转换后的base64直接放到img标签的src即可显示
            document.querySelector('img').src = e.target.result
          }
        }