获取input file里上传的文件 => 实现预览效果

<input type="file" id="file">
<img src="" alt="图片" id="img" style="width: 50px;margin-top:10px;display: none">
<script>
    $(function () {
        $("#file").on('change', function () {
            //获取文件对象，files是文件选取控件的属性，存储的是文件选取控件选取的文件对象，类型是一个数组
            // console.log(this.files[0])
            // console.log(file.files[0])
            const windowURL = window.URL || window.webkitURL;
            //这个函数（window的方法）创建出路径，浏览器能通过原生接口访问本地文件的路径，其中window可以省略，参数为需要创建路径的dom元素。
            var imgUrl = windowURL.createObjectURL(this.files[0]);
            // console.log(imgUrl)
            // document.querySelector('#img').src = imgUrl ;
            $("#img").attr('src', imgUrl).css('display', 'block')
        })
    })
</script>

参考：
获取input file里上传的文件 => 实现预览效果
通过AJAX实现用户上传图片时在网页上实时预览本地图