JavaScript文件转成base64编码

时间 2019-11-11

标签 javascript 文件转成 base64 base 编码栏目 JavaScript 繁體版

原文原文链接

最近在作项目时须要用到图片上传，而且要转成base64进行预览，因此就写个小案例，话很少说先上代码：javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input id="file" type="file" onchange="imgChange(this)" accept="image/*" />
        <img width="300" height="300" src="">
        <script type="text/javascript">
            function imgChange(obj) {
                var image = obj.files[0]; //获取文件域中选中的图片
                var reader = new FileReader(); //实例化文件读取对象
                reader.readAsDataURL(image); //将文件读取为 DataURL,也就是base64编码
                reader.onload = function(ev) { //文件读取成功完成时触发
                    var dataURL = ev.target.result; //得到文件读取成功后的DataURL,也就是base64编码
                    document.querySelector("img").src = dataURL; //将DataURL码赋值给img标签
                    console.log(dataURL);
                }
                console.log(image);
            }
        </script>
    </body>
</html>

以上代码实现的效果图：html

图一、java

图二、学习

经过图2就能够看到已经拿到了咱们全部想要的东西。this

注：本博客为我的学习笔记，大牛绕路。编码