当前位置: 首页 > news >正文

js FileReader的常用使用方法

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

主要的读取方法:

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

readAsBinaryString(): 开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含所读取文件的原始二进制数据。

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

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

标识符:

  • onloadstart 状态:数据正在被加载;
  • onloadend 状态:已完成全部的读取请求;
  • .当然状态为 0(readyState)表示还没有加载任何数据;
  • 每过50ms左右,就会触发一次 progress 事件;也就是说这个可能多次触发,onload 事件在 onloadend 之前触发;
  • 由于种种原因无法读取文件时,会触发 error 事件。触发 error 事件时,相关信息保存在 FileReader 对象的 error 属性中,这个属性将保存一个对象,此对象只有一个属性 code,即错误码。1 表示未找到文件,2 表示安全性错误,3 表示读取中断,4 表示文件不可读,5 表示编码错误;
  • 如果想中断读取过程,可调用 abort 方法,就会触发 abort 事件。在返回时,readyState 属性为 DONE。一般用于后台的操作;

相关文章:

js FileReader的常用使用方法

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

网络威胁情报:数据的力量

在一个日益互联和数字化的世界中,网络威胁已成为一项重大挑战,可能危及您组织的声誉、财务稳定性和整体运营效率。 事实上,根据 IBM 2022 年的一份报告,数据泄露的平均成本现在为 435 万美元。 鉴于网络威胁的重要性和影响日益突…...

shell:清理指定目录中指定天数之前的旧文件

前言 我们在服务器运行一些服务经常会产生很多临时文件,而有些临时文件不定期处理很容易就打满了整个磁盘;所以有必要去定期清理,基于这个需求我们就可以搞一个脚本结合crontab或者服务调度这些来使用; 脚本实现 #!/bin/bash# …...

想入门网络安全?先来看看网络安全行业人才需求!

如果你是一个想要入门网络安全行业的小白、如果你是网络安全专业在读的大学生、如果你是正在找工作的新手,那么这篇文章你一定要仔细看。毕竟知己知彼百战百胜,知道行业的人才需求才能更好得发挥自己的优势。 当你打开BOSS直聘、拉钩等招聘网站&#xf…...

0424 spring AOP学习

AOP是指什么? 面向切面编程,Aspect Oriented Program。是一种编程范式、思想。 Spring AOP里涉及的AOP原理叫什么? 动态代理。 动态代理其实就是在运行时动态的生成目标对象的代理对象,在代理对象中对目标对象的方法进行增强。…...

GB/T 28181-2022 新版差异笔记

GB/T 28181-2022 新版差异笔记 文章目录 GB/T 28181-2022 新版差异笔记更改了标准范围删除部分术语和定义增加PTZ缩略语更改SIP监控域互联结构图更改了“联网系统通讯协议结构图”增加了媒体流数据传输的RTP时间戳要求增加了对H.265、AAC的支持更改了SDP协议的引用更改了与其他…...

以轻量级服务器niginx为核心的JavaWeb项目:第一章 项目设计

这里写目录标题 一 需求分析与环境搭建1.需求分析2.环境搭建1.2.1首先配置mysql环境1.2.2 配置maven环境 二 打成War包,发到linux上 一 需求分析与环境搭建 1.需求分析 2.环境搭建 1.2.1首先配置mysql环境 先查找一下mysql环境 [roothadoop122 ~]# mysql --vers…...

【error】 Request method ‘GET‘ not supported app端调用后台接口报错,后台人员自己调用时没问题

目录 问题描述原因分析解决方案方法一:方法二:方法三: 联系自身 问题描述 org.springframework.web.HttpRequestMethodNotSupportedException: Request method ‘GET’ not supported at org.springframework.web.servlet.mvc.method.Request…...

Microsoft Bitlocker企业级管理部署方案

目录 一、前言 二、BitLocker部署前的准备工作 三、BitLocker的部署方式 3.1 通过群组策略部署BitLocker...

Jetpack Compose 中使用分页 API 调用的无限滚动

Jetpack Compose 中使用分页 API 调用的无限滚动 最近,我在DashCoin 的硬币屏幕上添加了一个带有分页 API 调用的无限滚动。它使浏览硬币列表变得非常困难,并且确实减少了初始加载时间,比以前少了。如果没有正确实施,实施无限滚动…...

第5章 数据结构之“链表”

链表简介 1.多个元素组成的列表。 2.元素的存储不连续,用next指针连在一起。 数组 vs 列表 数组:增删非手尾元素时往往需要移动元素。如果要在数组中增加一个元素,数组后面的所有元素需要往后面移动一位。如果在数组中删除一个元素&#x…...

SpringMVC - REST风格介绍已经RESTful简化开发

文章目录 RESTREST基本介绍RESTful快速入门RESTful快速开发 REST REST基本介绍 REST (Representational State Transfer), 表现形式状态转换(访问网络资源的风格) 传统风格资源描述形式 http://localhost/user/getById?id1http://localhost/user/saveUser REST风格描述形式 …...

Android 10.0 user模式下解除系统进入recovery功能的限制

1.前言 在10.0的系统rom定制化开发中,系统中recovery模式功能也是很重要的一部分,而在原生系统中,对于debug模式的产品,可以通过电源键和音量+键进入recovery模式, 但是在user模式下的产品,对于通过这种方式,进入recovery模式就受限制了,防止用户无操作为了产品安全等…...

用这些 JavaScript 试题来提高你的编程技能

文章目录 一、解释 Promise 的概念和用法。二、解释节流(throttle)和防抖(debounce)在 JavaScript 中的应用场景。三、请列举 JavaScript 中的原始数据类型。四、请解释JavaScript中的作用域。五、写一个名为 multiply 的函数&…...

倾斜摄影超大场景的三维模型在网络发布应用遇到常见的问题浅析

倾斜摄影超大场景的三维模型在网络发布应用遇到常见的问题浅析 倾斜摄影超大场景的三维模型在网络发布应用时,常见的问题包括: 1、加载速度慢。由于数据量巨大,网络发布时需要将数据文件分割成多个小文件进行加载,这可能会导致页…...

基于遗传算法的梯级水电站群优化调度研究(Matlab代码实现)

💥 💥 💞 💞 欢迎来到本博客 ❤️ ❤️ 💥 💥 🏆 博主优势: 🌞 🌞 🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 …...

java每日问题

一,什么时聚集索引什么时非聚集索引 聚集索引就是基于主键创建的索引除了主键索引以外的其他索引被称为非聚集索引也叫二级索引由于在innodb引擎里面一张表的数据对应的物理文件本事就是按照B树来组织的一种索引结构而聚集索引就是按照每张表的主键来构建一颗B树然后…...

C++设计模式之 依赖注入模式探索

依赖注入模式 前言依赖注入模式的角色依赖注入模式的UML图依赖注入模式的设计和实现(C)依赖注入和访问者模式的区别依赖注入模式的使用场景依赖注入模式的优缺点结语 前言 GoF设计模式主要关注的是面向对象编程设计的问题,而依赖注入作为一种编程技术,它…...

如何实现Spring AOP以及Spring AOP的实现原理

AOP:面向切面编程,它和OOP(面向对象编程)类似。 AOP组成: 1、切面:定义AOP是针对那个统一的功能的,这个功能就叫做一个切面,比如用户登录功能或方法的统计日志,他们就各种是一个切面。切面是有切点加通知组成的。 2、连接点:所有可…...

数学建模——数据预处理

在数学建模时,经常遇到数据的预处理,那么会有一些什么情况呢,跟着北海老师总结了他的内容~希望对大家有所帮助! 缺失值 比赛提供的数据,发现有些单元格是null或空的缺失太多:例如调查人口信息,发现“年龄…...

TranslucentTB 架构深度解析:Windows 任务栏透明化技术实现与工程化实践

TranslucentTB 架构深度解析:Windows 任务栏透明化技术实现与工程化实践 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB Tran…...

Anaconda3 2025 安装教程【附安装包】快速安装下载

安装包https://qqstone.top/blog/anaconda3-2025 安装步骤 1. 解压压缩包 下载完成后,鼠标右击【Anaconda3 2025】压缩包,选择【解压至此处】。 2. 以管理员身份运行安装程序 打开解压后的文件夹,鼠标右击【Setup】选择【以管理员身份运行…...

Axios遭供应链投毒攻击(附排查与紧急补救指南)

每周下载3亿次的Axios遭供应链投毒攻击,附排查与修复指南 事件概述 2026 年 3 月 31 日,著名云安全平台 StepSecurity 监测到,在 JavaScript 生态系统中最受欢迎的 HTTP 客户端库 Axios(每周下载量超 3 亿次)遭遇了严重…...

QMCDecode:3分钟快速解锁QQ音乐加密文件,实现跨平台音乐自由

QMCDecode:3分钟快速解锁QQ音乐加密文件,实现跨平台音乐自由 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac,qmc0,qmc3转mp3, mflac,mflac0等转flac),仅支持macOS,可自动识别到QQ音乐下载目录…...

2026 年 GEO 优化公司推荐:6家服务商综合实力对比分析

一、GEO 行业进入合规技术双轮驱动的爆发期IDC 最新发布的《2026年全球生成式引擎优化市场报告》显示,2026年全球 GEO(生成式引擎优化)市场规模将达 220 亿美元,年复合增长率高达 122%,中国市场规模预计突破 480 亿元&…...

Tao-8k处理长文本技术详解:突破上下文窗口限制

Tao-8k处理长文本技术详解:突破上下文窗口限制 你是不是也遇到过这样的烦恼?想把一篇几十页的行业报告丢给AI,让它帮你总结要点,结果它告诉你“文本太长了,我处理不了”。或者,你希望AI能帮你分析一个完整…...

OpenClaw故障模拟:Qwen3-14b_int4_awq异常输入处理与恢复机制

OpenClaw故障模拟:Qwen3-14b_int4_awq异常输入处理与恢复机制 1. 为什么需要主动制造故障 去年冬天的一个深夜,我的OpenClaw自动化流程突然中断了。当时它正在帮我整理一批技术文档,却在处理某个特殊字符时直接"卡死"。这次经历让…...

告别黑盒:用Python拆解OpenBCI GUI的滤波与可视化模块(附完整代码)

从零构建Python版OpenBCI数据处理引擎:解码脑电信号处理全流程 在脑机接口开发领域,OpenBCI以其开源特性和专业级性能成为众多研究者的首选硬件平台。然而,其官方GUI虽然功能完善,却像一座封闭的城堡——我们能看到华丽的城墙&…...

通义千问Qwen2-VL模型部署避坑指南:如何用transformers库绕过Flash-Attention2安装

通义千问Qwen2-VL模型轻量化部署实战:避开Flash-Attention2的安装陷阱 最近在测试通义千问的多模态模型Qwen2-VL时,发现官方推荐的Flash-Attention2依赖项安装过程异常繁琐,不仅编译耗时数小时,还经常因环境配置问题报错。经过多次…...

3步打造专业级H5页面:开源编辑器h5maker零代码解决方案

3步打造专业级H5页面:开源编辑器h5maker零代码解决方案 【免费下载链接】h5maker h5编辑器类似maka、易企秀 账号/密码:admin 项目地址: https://gitcode.com/gh_mirrors/h5/h5maker 在数字化营销与内容传播领域,H5页面已成为连接品牌…...