首页 > 编程语言 >JavaScript中 FileReader 对象详解

JavaScript中 FileReader 对象详解

时间:2022-12-07 13:12:17浏览次数:63  
标签:result 读取 FileReader JavaScript 详解 事件 file icon

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

2.属性:

FileReader.error :

一个DOMException,表示在读取文件时发生的错误 。


FileReader.result:

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


FileReader.readyState:

表示FileReader状态的数字。 EMPTY 0 还没有加载任何数据。 LOADING 1 数据正在被加载。DONE 2 已完成全部的读取请求。

3.方法:

FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。

FileReader.abort():中止读取操作。在返回时,readyState 属性为 DONE。

FileReader.readAsArrayBuffer():开始读取指定的 Blob 中的内容。 一旦完成,result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。

FileReader.readAsDataURL():开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含一个 data: URL 格式的 Base64 字符串以表示所读取文件的内容。

FileReader.readAsText():开始读取指定的Blob中的内容。一旦完成,result 属性中将包含一个字符串以表示所读取的文件内容。

4.事件:

FileReader.onabort:处理 abort 事件。该事件在读取操作被中断时触发。

FileReader.onerror:处理 error 事件。该事件在读取操作发生错误时触发。

FileReader.onload:处理 load 事件。该事件在读取操作完成时触发。

FileReader.onloadstart:处理 loadstart 事件。该事件在读取操作开始时触发。

FileReader.onloadend:处理 loadend 事件。该事件在读取操作结束时(要么成功,要么失败)触发。

FileReader.onprogress:处理 progress 事件。该事件在读取Blob时触发。

因为 FileReader 继承自 EventTarget,所以所有这些事件也可以通过 addEventListener 方法使用。

使用:

  function icon_up() {
        const file = document.querySelector('#icon').files[0]
        console.log(file)

        const reader = new FileReader()
        reader.readAsDataURL(file)//进行读取
        reader.addEventListener('load', function () {
            //读取的事件监听
            if (file) {
                console.log(reader.result)
                icon_file = reader.result//存储读取后的base64格式图片
                icon_name = file.name
                document.getElementsByClassName('icon_cen')[0].style.backgroundImage = `url('${icon_file}')`
                document.getElementsByClassName('icon_cen')[0].style.backgroundSize = 'cover'
                document.querySelector('#icon').value = ''
            } else {
                alert('头像上传失败,请重新上传')
            }
        })

    }

  

标签:result,读取,FileReader,JavaScript,详解,事件,file,icon
From: https://www.cnblogs.com/SadicZhou/p/16962774.html

相关文章

  • 项目——基于GPS的种树机器人路径规划实战及详解
    项目——基于GPS的种树机器人路径规划实战及详解​​一、前言​​​​二、设计思路​​​​1、坐标系的转换​​​​2、输入的区域摆法及关系式​​​​3、设计流程图​​​......
  • C++——cv::Rect数据结构详解
    成员rect.tl()//矩形左上角点的坐标rect.br()//矩形右下角点的坐标rect.size()//矩形的大小rect.area()//矩形的面积rect.empty()//判断矩形是否为空rect.contains()//判......
  • HMI智能串口屏——在STM32开发板上的实战应用及其详解
    HMI智能串口屏——在STM32开发板上的实战应用及其详解​​一、HMI智能串口屏使用步骤​​​​二、附录​​一、HMI智能串口屏使用步骤安装USARTHMI软件(一般买的串口屏里......
  • C——枚举类型详解
    ​​枚举举例说明​​值得注意的是:枚举和结构体一样,如果还没定义枚举变量,是不能将里面的元素初始化的。错误代码:enumStates{STOP=0,TROT=1,BOUND=2,......
  • Java 枚举(enum) 详解7种常见的用法
    Java枚举(enum)详解7种常见的用法常量在JDK1.5之前,我们定义常量都是:publicstaticfianl....。现在好了,有了枚举,可以把相关的常量分组到一个枚举类型里,而且枚举提供了......
  • TCP协议详解
    简介:大家好,我是枫哥,......
  • Executor框架详解
    Executor框架详解java的线程既是工作单元,也是执行机制。从jdk5开始,把工作单元与执行机制分离开来。工作单元包括Runnable和Callable,而执行机制由Executor框架提供。这样一......
  • javaScript_01_按照key排序
     javaScript_01_按照key排序前言Object.keys()与Objetc.values()实现按key排序前言最近做一个小程序项目需要用到腾讯地图的api,在计算sig的时候需要将参数按照......
  • javascript - 判定输入浮点数是否合法
    方法借鉴其他作者,我进行了错误汇总并完善,记录以备后用;首先建立一个功能函数,用于检查输入浮点数是否合法:functionCheckValueError(theFloat){}//返回True表示错误,返回F......
  • JavaScript入门⑦-DOM操作大全
    JavaScript入门系列目录JavaScript入门①-基础知识筑基JavaScript入门②-函数(1)基础{浅出}JavaScript入门③-函数(2)原理{深入}执行上下文JavaScript入门④-万物皆......