• JavaScript系列之FileReader



    一、概述

    FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

    二、构造函数

    使用 FileReader() 构造器去创建一个新的 FileReader。

    1、语法

    var reader = new FileReader();
    
    • 1

    三、实例属性

    1、error

    返回读取文件时的错误信息

    1.1、语法

    var error = instanceOfFileReader.error
    
    • 1

    1.2、返回值

    返回一个 DOMError

    2、readyState

    提供 FileReader 读取操作时的当前状态。

    2.1、语法

    var state = instanceOfFileReader.readyState
    
    • 1

    2.2、值

    state一个数字,用来表示 FileReader 的三种可能状态。

    3、result

    返回文件的内容。只有在读取操作完成后,此属性才有效,返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。

    3.1、语法

    var file = instanceOfFileReader.result
    
    • 1

    3.2、值

    一个字符串或者一个ArrayBuffer ,这取决于读取操作是使用哪种方法来进行的。

    四、实例方法

    1、abort()

    该方法可以取消 FileReader 的读取操作,触发之后 readyState 为已完成(DONE)。

    1.1、语法

    instanceOfFileReader.abort();
    
    • 1

    2、readAsArrayBuffer()

    2.1、概述

    FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。

    2.2、语法

    instanceOfFileReader.readAsArrayBuffer(blob);
    
    • 1

    2.3、参数

    • blob
      即将被读取的 Blob 或 File 对象。

    3、readAsDataURL()

    readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL 格式的字符串(base64 编码)以表示所读取文件的内容。

    3.1、语法

    instanceOfFileReader.readAsDataURL(blob);
    
    • 1

    3.2、参数

    • blob
      即将被读取的 Blob 或 File 对象。

    4、readAsText()

    readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容 (字符串形式)

    这个方法是异步的,也就是说,只有当执行完成后才能够查看到结果,如果直接查看是无结果的,并返回 undefined

    也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果

    当转化完成后, readyState 这个参数就会转换 为 done 即完成态, event(“loadend”) 挂载的事件会被触发,并可以通过事件返回的形参得到中的 FileReader.result 属性得到转化后的结果

    4.1、语法

    instanceOfFileReader.readAsText(blob[, encoding]);
    
    • 1

    4.2、参数

    • blob
      Blob 类型 或 File 类型

    • encoding (可选)
      传入一个字符串类型的编码类型,如缺省,则默认为“utf-8”类型

    五、事件

    1、abort(中止事件)

    在中止读取时会触发 abort 事件:例如程序调用 abort()。

    2、error

    当由于错误(例如,文件未找到或不可读)导致读取失败时,将触发error事件。

    3、load

    当文件成功读取时,执行load 事件

    4、loadend

    当文件读取完成(成功与否)时触发loadend事件。

    5、loadstart

    当文件读取操作开始时触发loadstart事件。

    6、progress

    当FileReader读取数据时,进度事件会定期触发。

    写在最后

    如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
    如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
    如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
    谢谢各位读者们啦(^_^)∠※!!!

  • 相关阅读:
    echarts中地图使用的地图数据格式GeoJSON
    GeoServer运行报错503,……Unmapped relationship: 7
    AI-GruNet降噪算法
    怎么做口碑营销?口碑营销有哪些方式?
    SpringMVC
    天猫评价、销量计算逻辑规则再次变更
    nodejs+vue高校校图书馆elementui
    食品饮料行业S2B2B商城系统:提高市场集中度,推动电商产业新增长
    IDEA开发快捷键
    太空游戏第12课: 盾牌
  • 原文地址:https://blog.csdn.net/weixin_62277266/article/details/127607006