码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • JavaScript系列之FileReader


    文章の目录

    • 一、概述
    • 二、构造函数
      • 1、语法
    • 三、实例属性
      • 1、error
        • 1.1、语法
        • 1.2、返回值
      • 2、readyState
        • 2.1、语法
        • 2.2、值
      • 3、result
        • 3.1、语法
        • 3.2、值
    • 四、实例方法
      • 1、abort()
        • 1.1、语法
      • 2、readAsArrayBuffer()
        • 2.1、概述
        • 2.2、语法
        • 2.3、参数
      • 3、readAsDataURL()
        • 3.1、语法
        • 3.2、参数
      • 4、readAsText()
        • 4.1、语法
        • 4.2、参数
    • 五、事件
      • 1、abort(中止事件)
      • 2、error
      • 3、load
      • 4、loadend
      • 5、loadstart
      • 6、progress
    • 写在最后


    一、概述

    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^)\\\~~~
    谢谢各位读者们啦(^_^)∠※!!!

  • 相关阅读:
    C++ Reference: Standard C++ Library reference: C Library: cmath: cbrt
    Linux C++ 051-设计模式之中介者模式
    MySQL 8.0 Clone Plugin 详解
    【Python】使用 Matplotlib 和 Numpy 的 知识绘制一个简单的 二次函数图像 || 同一坐标系下绘制多个函数图像
    JS-事件委托-阻止事件冒泡和阻止默认行为-滚动事件-加载事件-元素尺寸位置
    ESP8266-Arduino编程实例-CCS811数字气体传感器驱动
    【网络编程】IO模型
    nacos
    Mabatis-puls强于Mybatis的地方
    爬取某牙视频
  • 原文地址:https://blog.csdn.net/weixin_62277266/article/details/127607006
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号