JavaScript 中的 FileReader

佚名 6年前 (2019-04-10) 随笔 1465人围观抢沙发百度已收录

在不经过服务器的时候，本地预览照片，当确定以后再上传

它是H5提供的构造函数

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

用法：

<input type='file'>
<img src=''  alt=''>
 
<script>

    const inp = document.querySelector('input')
    const img = document.querySelector('img')

    inp.addEventListener('change',function(e){
    
        const fileInfo = e.targer.files[0]
        const fr = new FileReader()

        // 这个方法是以base64编码形式解析文件
        fr.readAsDataURL(fileInfo)
    
        fr.onload = function() {
            // console.log(ft.result)
            img.src = fr.result
        }
    })

</script>

fr.readAsArrayBuffer(fileInfo)
// 用数字的方式组成的文件信息

fr.readAsTest(fileInfo)
// 读一个HTML片段 - 富文本就是这么来的

fr.onprogress = function(e){

    console.log(e)

}
// 进度条的形式，分段上传