原生js读取图片文件的base64，通过base64快速访问本地图片

even_know

于 2023-12-07 15:33:15 发布

阅读量836

点赞数 8

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_71349739/article/details/134856934

版权

本文介绍了如何使用HTML和JavaScript在表单中实现文件上传功能，通过FileReader读取文件并转换为Base64格式展示在页面上的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
    <img src="" alt="">
    <script>
        let inp = document.querySelector('input');
        let img = document.querySelector('img');
        img.style.display = 'none'
        inp.onchange = (e) => {
            const reader = new FileReader()
            reader.readAsDataURL(e.target.files[0])
            reader.onload = (e) => {
                img.style.display = 'block'
                img.src = e.target.result
            }
        }
    </script>
</body>

</html>