1、原理浅析

FileReader，利用FileReader实例的readAsDataURL方法可以将input上传的图片转成base64形式的url，将其给到img的src属性即可
window.URL.createObjectURL，该API可将input上传的图片转成blob形式的url，将其给到img的src熟悉即可
看下二者的兼容性：

FileReader兼容性.png
URL兼容性.png

可以看到FileReader的兼容性是优于URL的

2、具体实现

Talk is easy，show you the Code!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片预览两种实现</title>
</head>
<body>
    <input type="file" id="file" multiple>
    <div class="show-img"></div>
    <script>
        
    document.getElementById('file').onchange = function(e){          
        var ele =  document.getElementById('file').files[0];
        //方式1：FileReader
        var fr = new FileReader();
        fr.onload = function(ele){
            var img = new Image();
            img.src = ele.target.result;
            document.querySelector('.show-img').appendChild(img);
            // 得到的img是这样的<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."/>
        }
        fr.readAsDataURL(ele);

        //方式2：URL.createObjectURL(blob)
        // var createObjectURL = function(blob){
        //   return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
        // };
        // var imgdata = createObjectURL(ele);

        // var img = new Image();
        // img.src = imgdata;
        // // 得到的img是这样的<img src="blob:null/21183794-c843-403d-a3b5-e1a35f30587c">

        // document.querySelector('.show-image').appendChild(img);
    }
    </script>
</body>
</html>