将图片转换成Base64

最新推荐文章于 2025-04-23 16:49:32 发布

原创最新推荐文章于 2025-04-23 16:49:32 发布

· 260 阅读

0 ·

版权

文章标签：

#图片转换成Base64

图片转换Base64 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片转成Base64</title>
</head>
<body>
<input type="file" id="image" onchange="settt()"><br/>
预览图片<img id="lookPhoto">
<script type="text/javascript">
    function settt(){
        var reader = new FileReader();
        var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
        var file = image.files[0];
        console.log(file)
        var imgUrlBase64;
        if (file) {
            //将文件以Data URL形式读入页面
            imgUrlBase64 = reader.readAsDataURL(file);
            reader.onload = function (e) {
                //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
                if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                    alert( '上传失败，请上传不大于2M的图片！');
                    return;
                }else{
                    //执行上传操作
                    console.log(reader.result);
                }
                document.getElementById("lookPhoto").setAttribute("src",reader.result)
            }
        }
    }
  </script>
  </body>
  </html>