图片预览功能的实现

图片预览功能

图片预览功能在日常中也很常见就是在提交图片时，可以在选中文件之后在页面中显示其内容的功能。
那么怎么实现呢。
目前我所知有两种方式

1. 文件读写
   我们可以利用文件读写来将上传的文件内容获取到再渲染到页面中。

document.getElementById("btn").onclick = function() {

        var reader = new FileReader();
        reader.onload = function(e) {
            console.log(e.target);
            document.getElementsByTagName("img")[0].src = e.target.result;
        }
        reader.readAsDataURL(document.getElementById("file").files[0]);
    }

效果如下


我们仔细看控制台输出就可以知道，这种方法是将图片转换成base64格式再进行输出，但是使用这种方法网页的大小会变大，也就是说转换成base64之后图片比之前的数据量要要大不少，并且不能读取太大的文件。
2. URL.createObjectURL
这种方式也可以实现图片的预览功能

document.getElementById("btn").onclick = function() {
document.getElementsByTagName("img")[0].src = URL.createObjectURL(document.getElementById("file").files[0]);
    }

效果如下


我们也可以从控制台看出，URL.createObjectURL是将图片转换成blob的格式。
什么是blob呢，根据MDN的解释，blob对象是表示一个不可变、原始数据的类文件对象，它的数据可以按文本或二进制的格式进行读取。
以上便是图片预览功能的两种实现方式。