H5中，FileReader使用

港控/mmm° 2022-04-08 11:43 313阅读 0赞

FileReader允许web应用程序异步读取存储在用户计算机上的文件的内容。

使用File 或 Bolb 对象指定要读取的文件或数据。

file对象可以是来自<input type="file" /> 选中的文件(拥有files属性，由传入的file对象组成)，也可以是来自拖放操作的DataTransfer对象。

1、创建FileReader对象

var reader = new FileReader()

2、方法

reader.abort（）   终止读取操作， 在返回时，readyState = 'DONE'

reader.readAsArrayBuffer(file)   按字节读取文件内容，result属性为ArrayBuffer对象表示

reader.readAsBinaryString(file)   按字节读取文件，result属性为文件的二进制串

reader.readAsDataURL(file)   result属性为 data：url 格式的字符串，即转为了base64

reader.readAsText(file)   result属性为一个字符串表示读取到的内容

3、事件

reader.onabort()     处理abort事件，读取中断时触发

reader.onerror()    读取发生错误时触发

reader.onload()     读取完成时触发

reader.onloadstart()    读取开始时触发

reader.onloadend()    读取结束时（要么成功，要么失败）触发

reader.onprogress()   读取Blob时触发

FileReader继承自EventTarget，所以可以通过addEventListener方法使用

4、属性

reader.error 读取文件时发生的错误

reader.readyState 表示状态的数字

EMPTY  0   还没有加载任何数据

LOADING  1  数据正在被加载

DONE  2      已完成全部的读取请求

reader.result    读取到的文件内容

例子：

<input type="file" accept=".png" οnchange="saveImg" />

<img src="" alt="图片" id="picture">

function saveImg(e) \{

let file = e.target.files\[0\];

let reader = new FileReader()；

reader.readAsDataURL(file)；

reader.οnlοad= function()\{

if(this.result) \{

document.getElementById('picture').setAttribute('src', this.result)

\}

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，313人围观）

还没有评论，来说两句吧...

相关阅读

相关 java中FileReader的使用

package com.test.io01; import java.io.File; import java.io.FileNotFound

素颜马尾好姑娘i/ 2023年10月12日 14:20/ 0 赞/ 35 阅读

相关 html5 FileReader

FileReader可以已异步的方式用来操作input元素选取的文件，拖拽操作获取的文件以及来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后

亦凉/ 2022年08月21日 03:27/ 0 赞/ 176 阅读

相关 HTML5 FileReader

前面本博介绍了[File API][]，这里将继续介绍一下FileReader，用FileReader具体地读取文件内容。 NOTE: 在chrome浏览器

梦里梦外;/ 2022年08月02日 09:51/ 0 赞/ 176 阅读

相关 H5利用FileReader上传图片

1. Html部分 <h2>文件上传演练</h2> <div id="result">

比眉伴天荒/ 2022年07月11日 09:22/ 0 赞/ 288 阅读

相关 HTML5的FileReader的使用

> HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 > >

今天药忘吃喽~/ 2022年06月15日 01:09/ 0 赞/ 203 阅读

相关 HTML5中FileReader接口

FileReader接口主要用来把文件读入内存，并且读取文件中的数据。FileReader接口提供一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的

野性酷女/ 2022年05月31日 10:23/ 0 赞/ 213 阅读

相关 HTML5之FileReader API的使用

HTML5之FileReader API的使用简介 FileReader 对象允许Web应用程序异步读取存储在用户计算机上面的文件（或者原始数据缓冲区）的内容，使用

电玩女神/ 2022年05月24日 02:50/ 0 赞/ 204 阅读

相关图片预览新特性 h5 FileReader

图片预览新特性 h5 FileReader <!DOCTYPE html> <html lang="en"> <head> <meta

红太狼/ 2022年05月12日 01:58/ 0 赞/ 335 阅读

相关 H5中，FileReader使用

FileReader允许web应用程序异步读取存储在用户计算机上的文件的内容。使用File 或 Bolb 对象指定要读取的文件或数据。 file对象可以是来自<input

港控/mmm°/ 2022年04月08日 11:43/ 0 赞/ 314 阅读

相关 HTML5之FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

客官°小女子只卖身不卖艺/ 2021年09月23日 00:20/ 0 赞/ 285 阅读