上传图片，实时预览

最新推荐文章于 2021-01-21 22:11:11 发布

原创最新推荐文章于 2021-01-21 22:11:11 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

17 篇文章

订阅专栏

该博客介绍了一种使用JavaScript实现的图片上传功能，其中包括文件大小限制及预览效果。当用户选择一张图片后，脚本会检查文件大小是否超过2MB，并在网页上显示所选图片的预览。此功能适用于各种需要用户上传图片的应用场景，如社交媒体平台和个人博客等。

div

<input type="file" accept="image/*" class="add_btn">
<div class="upload"></div>

$(".add_btn").change(function(){
    var files = this.files; //获取路径
    var img = new Image();
    var reader = new FileReader();//读取文件
    reader.readAsDataURL(files[0]);
    reader.onload = function(e){
        var mb = (e.total/1024)/1024;
        if(mb>= 2){
            alert('文件大小大于2M');
            return;
        }
        img.src = this.result;
        $(".upload").innerHTML = '';
        $(".upload").append(img);
    }
});