有关javascript图片上传预览有两种方式

最新推荐文章于 2023-12-21 17:42:11 发布

nightseventhunit

最新推荐文章于 2023-12-21 17:42:11 发布

阅读量569

点赞数 1

分类专栏： JAVASCRIPT 文章标签：技术笔记记录

本文链接：https://blog.csdn.net/ght521/article/details/55506459

版权

JAVASCRIPT 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

以前总之客户要求要有图片预览功能，通常的办法就是找一个类库，今天在这里介绍一种方法只需一小段代码即可实现图片预览，其原理是base64位图，这是现在一种比较新的方法，还有一种是blob二进制位图，这种方法比较旧而且有兼容性问题，base64位图预览对老的浏览器支持不太好，blob是一种旧的引用方式对旧浏览器支持好不好这个有待测试，下面出代码：

第一种是base64位图方式，第二种是blob方式

var preview = document.querySelector('img');
            var file = document.querySelector('input[type=file]').files[0];
            var reader = new FileReader();
            reader.onloadend = function () {
                preview.src = reader.result;
            }
            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = "${ctx}/images/nopic.gif";
            }
            //blob方式显示图片预览
            //preview.src = window.URL.createObjectURL(file.files[0]);