HTML5文件读取

 

HTML5文件读取

• FileReader

  • 接口有3个读取文件方法

  • readAsBinaryString ---将文件读取成二进制编码

  • readAsDataUrl --将文件读取成DataUrl

  • readAsText --将文件读取成文本

• FileReader提供的事件属性

  • onabort --中断时触发

  • onload --读取完成时触发

  • onerror --读取异常时触发

  • onloadend --无论读取成功获取失败都触发

  • onloadstart 读取开始时触发

  • onprogress 读取中触发

示例

    <!-- 获取上传的文件 -->

    <!-- 写一个上传文件的控件 -->
    <input class="file-up" type="file">
    <!-- 显示获取到图片文件 -->
    <input class="img-show" type="image" src="#">

    <script>
        
        // 1.获取控件
        var input=document.querySelector(".file-up");
        

        input.onchange=function(){

            //2.获取上传的文件 
            file=this.files[0];
            
            // 3.创建一个FfileReader
            var fl=new FileReader();
            
            // 4.将文件读取成DataURL格式
            fl.readAsDataURL(file);

            fl.onload=function(){
                
                // 5.获取文件 fl.result
                console.log('tag', fl.result)
                document.querySelector(".img-show").setAttribute("src",fl.result);
            }


        }

    </script>

　　该方法在实际项目中可以使用在图片上传预览等功能上