原生JS上传图片案例

    <input type="file" name="" id="">
    <!-- <h1></h1> -->
    <img src="" alt="">
    <script>
        let dian = document.querySelector('input')
        dian.onchange = function () {
            //设置一个变量获取文件
            let jieS = this.files[0]
            //再创建一个读取文件的变量
            let Chuang = new FileReader()
            // 读取文件的变量.readAsText(获取文件的变量):用来读取文本文件
            // 读取文件的变量.readAsDataURL(获取文件的变量):用来读取文件路径(图片)

            // Chuang.readAsText(jieS)
            Chuang.readAsDataURL(jieS)

            // 获取读取的结果，当读取的结果完成后触发该事件
            Chuang.onload = function () {
                // let h1 = document.querySelector('h1')
                let img = document.querySelector('img')
                // h1.innerText = this.result
                img.src = this.result
                img.style.display = 'block'
                console.log(this.result);
            }
        }
    </script>