Javascript上传图片转base64并预览

最新推荐文章于 2024-06-19 11:46:44 发布

原创最新推荐文章于 2024-06-19 11:46:44 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍如何使用JavaScript实现文件选择后，将图片转换为Base64格式并在浏览器中实时预览。通过FileReader API，演示了从input[type=file]获取文件并转化为data:URL的过程。

Javascript上传图片转base64并预览

HTML：

<div>
     <input type="file" id="myimg"
            onchange="imgChange(this)"
            accept="image/png,image/gif,image/jpeg"/>
     <img width="300px"  src="" alt="">
 </div>

function imgChange(img) {
    // 生成一个文件读取的对象
    const reader = new FileReader();
    reader.onload = function (ev) {
        // base64码
        var imgFile =ev.target.result;//或e.target都是一样的
        document.querySelector("img").src= ev.target.result;
    }
    //发起异步读取文件请求，读取结果为data:url的字符串形式，
    reader.readAsDataURL(img.files[0]);
}