方法一

操作方法: window.URL || window.webkitURL

window.URL属性返回一个对象,这和对象提供了一个静态createObjectURL()方法去
创建和管理object URLs.
URL对象是硬盘指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径，这个时候就可以设置到img中显示了
window.webkitURL和window.URL是一样的，window.URL标准定义，window.webkitURL是webkit内核的实现，一般手机上就是使用这个，还有火狐等浏览器的实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>file</title>
</head>
<body>
    <input type="file" id="img">
</body>
</html>
<script>
    document.querySelector("#img").onchange = function(){
        console.log(document.querySelector("#img").files);
        let url = window.URL || window.webkitURL;
        console.log(url.createObjectURL(this.files[0]));//this.files[0]为选中的文件(索引为0因为是单选一个),这里是图片
        let img = new Image();              //手动创建一个Image对象
        img.src = url.createObjectURL(this.files[0]);//创建Image的对象的url
        img.onload = function () {          //onload 加载完成后触发
            console.log('height:'+this.height+'----width:'+this.width)
        }
    }
</script>

在这里插入图片描述

方法二

操作方法： FileReader

FileReader类支持异步读取input标签文件信息（大小，时间，数据等）
通过img标签的offsetHeight和offsetWidth获取图片的尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>file</title>
</head>
<body>
    <!-- 1.给input标签添加一个onchange事件：一旦选择文件发生变化则会触发   目的：获取选择图片的原始数据 -->
    <input type="file" onchange=uploadImg(this)>
</body>
</html>
<script>
    //选择图片，马上预览
    function uploadImg(obj) {
        //1.读取文件详细信息
        var file = obj.files[0];
        console.log(obj);
        console.log(file);
        //2.使用FileReader读取文件信息
        var reader = new FileReader();
        //3.开始读取
        reader.readAsDataURL(file)
        //4.监听读取文件过程方法,异步过程
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");
            let img = new Image();
            img.src = e.target.result;//获取编码后的值,也可以用this.result获取
            img.onload = function () {
                console.log('height:'+this.height+'----width:'+this.width)
            }
        }
    }
</script>