图片预览方法

最新推荐文章于 2024-08-06 17:41:12 发布

原创最新推荐文章于 2024-08-06 17:41:12 发布 · 439 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #预览图片 #base64码

小技巧专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了前端如何实现图片预览功能，包括通过服务器反馈图片进行预览和不通过服务器，前端自行预览待上传图片的方法。通过使用input和img标签结合FileReader API，实现用户在上传图片前的快速预览。

预览图片的形式：
1：通过服务器反馈的图片进行预览。
这里不做详解，大致是前端请求图片，服务器反馈图片，前端呈现图片。
2：不通过服务器，前端自己预览待上传的图片。
a、需要一个input标签，作为接受图片的接口。
b、需要一个img标签，作为预览图片的标签。

代码如下：

    $("input").change(function() {
        //判断是否为图片
        if (this.files[0].type.indexOf("image") == 0) {
            var reader = new FileReader();
            reader.readAsDataURL(this.files[0]);
            reader.onload = function () {
            //this.result 是base64码了
            //将img标签的src直接设置为this.result即可
                $("img").attr({
                    src : this.result,
                });
            }
    })