文件转base64字符串（ Jquery）

2020-01-03 3,012 阅读1分钟

base64是一种数据传输格式，怎么把网页的通过file选中的文件，转换成base64字符串呢？

第一步，创建一个html页面，放入一个file标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
    <!--文件标签-->
    <input id="file"  type="file" onchange="Change()"/>
    <!--图片标签-->
    <img id="img" src="" alt="" />
</body>
</html>

第二步，当选择文件完成后，图片标签，显示选中的图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
    <!--文件标签-->
    <input id="file"  type="file" onchange="Change()" />
    <!--图片标签-->
    <img id="img" src="" alt="" />
    <script>
        function Change() {
            var reader = new FileReader();//创建一个读流
            var file = $("#file")[0].files[0];//获取选中文件
            reader.readAsDataURL(file);//读文件
            reader.onload = function (e) {//读事件
                $("#img").attr('src', e.target.result)
            };
        };
    </script>
</body>
</html>