JS图片上传预览（一）

URL.createObjectURL()
静态方法会创建一个 DOMString。
其中包含一个表示参数中给出的对象的URL。
这个 URL 的生命周期和创建它的窗口中的document绑定，这个新的URL 对象表示指定的File或Blob对象。

用这个放方法能把img转成一个blob的对象（看上去类似与base64编码的图片格式）
然后把转换的 String放到 img的src中就能实现预览了
PS：这是我见过最简单的一个图片预览的写法了

 <img src="" alt="" id="img" style="width: 300px;">
<input id="logo" name="logo" accept="image/*" type="file" value="上传照片" onchange="fileReader()">

<script>
    function fileReader(){
        var file = document.getElementById("logo");
        html5Reader(file);
    }
    function html5Reader(file) {
        var fileObj = file.files[0],
        img = document.getElementById("img");
        img.src = URL.createObjectURL(fileObj); // URL.createObjectURL  safari不支持
    }
<script>

没有看错，就是几行代码
下面是效果图

GIF.gif