JavaScript：通过纯js代码实现图片实时预览功能

東辰

于 2021-04-22 09:35:28 发布

阅读量467

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.csdn.net/sageyin/article/details/116000141

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用JavaScript的FileReader对象实现图片的实时预览功能。通过定义文件选择框并监听change事件，利用FileReader的readAsDataURL方法读取图片数据，最后在页面上展示预览效果。最终实现了在选择图片后即时显示预览图的功能。

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

誊抄自原来的笔记

本文主要用到了FileReader对象来实现图片的实时预览功能

一、首先定义一个file选择框，写好change事件

<input type="file" accept="image/*" onchange="changeHandle(this)">

二、change事件代码，通过FileReader实现预览

弹框是用的layer

function changeHandle(_this) {
    // 获取当前选中的文件
    var file = _this.files[0];
    const imgMaxSize = 1024 * 1024 * 5 // 5MB
    // 检查文件类型
    if(!/image\/\w+/.test(file.type)){
        layer.msg('不支持的格式!');
        return;
    }
    // 文件大小限制
    if(file.size > imgMaxSize ) {
        layer.msg('文件大小不能超过'+imgMaxSize+'MB!');
        return;
    }
    // 照片预览 此方法通过base64方法预览 add by yinchendong
    if (window.FileReader) {
        var fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = function() {
            $('img').remove();
            $('<img/>').attr('src',this.result).appendTo('body');
            $('img').css({
                'width':'500px',
                'height':'350px'
            })
        }
    } else {
        layer.msg('抱歉，您的客户端不支持预览');
    }
}