<input type="file" name="file" multiple>
    <img src="" alt="">
    <script>
        //给输入框添加change事件
        var input = document.querySelector("input");
        input.addEventListener("change", function() {
            //文件读取对象，是系统自带的对象
            var reader = new FileReader();
            // console.log(reader);
            // error: null
            // onabort: null
            // onerror: null
            // onload: null     上传成功之后的方法
            // onloadend: null  上传完成的方法
            // onprogress: null   持续上传  上传中
            // onloadstart: null  
            //文件上传的dom对象有一个files伪数组对象,里面包含上传的对象
            var file = input.files;
            // console.log(file)
            // 2. 读取上传的地址  url  是以base64开头的加密字符
            reader.readAsDataURL(file[0]);
            //必须要得到文件上传成功后才能拿到地址
            reader.onload = function(e) {
                // console.log(reader.result);//储存图片地址
                //把图片预览
                document.querySelector("img").src = reader.result;
            }
        })

<input type="file" name="file" multiple>
    <img src="" alt="">
    <script>
        //给输入框添加change事件
        var input = document.querySelector("input");
        input.addEventListener("change", function() {
            //文件读取对象，是系统自带的对象
            var reader = new FileReader();
            // console.log(reader);
            // error: null
            // onabort: null
            // onerror: null
            // onload: null     上传成功之后的方法
            // onloadend: null  上传完成的方法
            // onprogress: null   持续上传  上传中
            // onloadstart: null  
            //文件上传的dom对象有一个files伪数组对象,里面包含上传的对象
            var file = input.files;
            // console.log(file)
            // 2. 读取上传的地址  url  是以base64开头的加密字符
            reader.readAsDataURL(file[0]);
            //必须要得到文件上传成功后才能拿到地址
            reader.onload = function(e) {
                // console.log(reader.result);//储存图片地址
                //把图片预览
                document.querySelector("img").src = reader.result;
            }
        })