原生js将图片转成base64，实现预览效果

最新推荐文章于 2023-05-08 10:58:19 发布

原创最新推荐文章于 2023-05-08 10:58:19 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#图片预览

图片预览专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的HTML与JavaScript实现的图片预览功能。通过文件输入元素选择图片后，利用FileReader API读取所选文件，并将图片显示在一个img元素中。此方法适用于网页应用中的即时图片预览场景。

html代码部分：

<img id="img">
<input type="file" id="img-select">

原生js处理部分

function imgPreview() {
    var files = this.files;
    var file = files[0];
    var reader = new FileReader();
    reader.onload = function() {
        var result = this.result;
        document.getElementById('img').src=result;//img的id
    };
    reader.readAsDataURL(file);
}
document.getElementById('img-select').addEventListener('change',imgPreview);