图片的base64值输出以及图片的提前预览

最新推荐文章于 2024-05-31 15:00:13 发布

一个小人儿

最新推荐文章于 2024-05-31 15:00:13 发布

阅读量226

点赞数

分类专栏：小白分享文章标签： html5

本文链接：https://blog.csdn.net/Ajax_A/article/details/105196435

版权

小白分享专栏收录该内容

29 篇文章 1 订阅

订阅专栏

图片的base64值的输出，以及图片的预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" name="
    " id="file">
    <!-- <img src="" alt="" id=""> -->
    <script>
        var file = document.getElementById("file");
        file.onchange=function(e){
            console.log(e.explicitOriginalTarget.files[0])
            let filereader = new FileReader();
            filereader.readAsDataURL(e.explicitOriginalTarget.files[0])
            filereader.onload=function(){
                var img = new Image()
                img.src=filereader.result;
                img.width=200;
                img.height=200;
                document.body.appendChild(img)
                // console.log(filereader.result)
            }
        }
    </script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一个小人儿

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片的base64值输出以及图片的提前预览

图片的base64值的输出，以及图片的预览<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
复制链接

扫一扫