人迹罕至的FileReader

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

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

这边文章主要分4 部分介绍FileReader。

FileReader方法;
FileReader事件;
代码操作;
开发实例(重点阅读,可快速应用于项目中)。

FileReader方法:

首先创建一个FileReader实例:

const reader = new FileReader();

readAsArrayBuffer(file)

按字节读取文件内容,结果用ArrayBuffer对象表示

readAsBinaryString(file)

按字节读取文件内容,结果为文件的二进制串

readAsDataURL(file)

读取文件内容,结果用data:url的字符串形式表示,将文件内容进行base64编码后输出

readAsText(file,encoding)

按字符读取文件内容,结果用字符串形式表示

abort()

终止文件读取操作

FileReader事件:

onloadstart 当读取操作开始时调用

onprogress 在读取数据过程中周期性调用

onabort 当读取操作被中止时调用

onerror 当读取操作发生错误时调用

onload 当读取操作成功完成时调用

onloadend 当读取操作完成时调用,无论成功,失败或取消

每过50ms左右,就会触发一次progress事件,对于较大的文件可以利用progress实现进度条;

由于种种原因无法读取文件时,会触发error事件。触发error事件时,相关信息保存在FileReader对象的error属性中,这个属性将保存一个对象,此对象只有一个属性code,即错误码。1表示未找到文件,2表示安全性错误,3表示读取中断,4表示文件不可读,5表示编码错误。

代码操作

function imgChange(e){
   
    if (e.files.length != 0) {
   
      var reader = new FileReader();
      if (!reader) {
   
        e.value = '';
        return;
      };

      reader.onload = function(ev) {
   
        var result = ev.target.result; // 图片base64
      };

      reader.readAsDataURL(file);
    }
  }

开发实例

FileReader大多用于图片上传处理,处理图片转译base64,转译完成后进行其他的处理。

详见图片转base64、判断图片大小、图片压缩、图片上传

目录
相关文章
|
5月前
|
Java
FileInputStream和FileOutputStream
FileInputStream和FileOutputStream
22 0
|
6月前
File操作-FileReader(FileWriter)/BufferedReader(Writer)
File操作-FileReader(FileWriter)/BufferedReader(Writer)
26 0
|
9月前
FileReader和FileWriter流
FileReader和FileWriter流
29 0
|
11月前
|
存储 缓存 Java
【Java I/O 流】文件字符输入输出流:FileReader 和 FileWriter
本篇文章主要讲述“文件字符输入流”和“文件字符输出流”两个类的使用,并列举了一些读写案例,帮助学习。
356 0
|
11月前
|
存储 Java
FileInputStream 你了解多少
FileInputStream 你了解多少
|
11月前
|
Java
浅谈FileOutputStream
浅谈FileOutputStream
|
Web App开发 存储 小程序
FileReader详解
FileReader详解
FileReader详解
|
Java
java IO流之BufferedReader和BufferedWriter
BufferedReader和BufferedWriter 一、简介: 二、使用BufferedReader案列 BufferedReader 中文乱码解决方案解决方案; 三、BufferedWriter使用案例
205 0
java IO流之BufferedReader和BufferedWriter
BufferedReader和BufferedWriter(七)
以前读取和写入文件内容时,用的Reader和Writer, 当调用 read() 或者 readLine() 方法时,效率是非常慢的。 如果能添加缓冲区,那么就非常好了。 BufferedReader 和 BufferedWriter ,就是在 Reader和 Writer 的基础上,添加了缓冲区, 即不仅具有Reader和Writer的各个功能,还能通过缓冲区进行相应的优化, 其实,这就是装饰器。
126 0
BufferedReader和BufferedWriter(七)
字符流Reader和Writer(三)下
字符流Reader和Writer(三)
104 0
字符流Reader和Writer(三)下