[HTML5] FileReader对象
写在前面
前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍。
FileReader
FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件。
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据。
创建实例
var reader = new FileReader();
方法
方法定义 | 描述 |
---|---|
abort():void | 终止文件读取操作 |
readAsArrayBuffer(file):void | 异步按字节读取文件内容,结果用ArrayBuffer对象表示 |
readAsBinaryString(file):void | 异步按字节读取文件内容,结果为文件的二进制串 |
readAsDataURL(file):void | 异步读取文件内容,结果用data:url的字符串形式表示 |
readAsText(file,encoding):void | 异步按字符读取文件内容,结果用字符串形式表示 |
事件
事件名称 | 描述 |
---|---|
onabort | 当读取操作被中止时调用 |
onerror | 当读取操作发生错误时调用 |
onload | 当读取操作成功完成时调用 |
onloadend | 当读取操作完成时调用,不管是成功还是失败 |
onloadstart | 当读取操作将要开始之前调用 |
onprogress | 在读取数据过程中周期性调用 |
使用方法
FileReader通过异步的方式读取文件内容,结果均是通过事件回调获取,下面是一个读取本地txt文件内容的例子:
var input = document.getElementById("file"); //input file
input.onchange = function(){
var file = this.files[0];
if(!!file){
//读取本地文件,以gbk编码方式输出
var reader = new FileReader();
reader.readAsText(file,"gbk");
reader.onload = function(){
//读取完毕后输出结果
console.log(this.result);
}
}
}
此外我们还可以通过注册onprogress、onerror等事件,记录文件读取进度或异常行为等等。
读取方式
FileReader提供了四种不同的读取文件的方式,如:readAsArrayBuffer会将文件内容读取为ArrayBuffer对象,readAsBinaryString则将文件读取为二进制串,下面对这四种方式进行简单区分。
首先准备一张图片(6764 字节)和一个txt文本(51字节)作为测试文件:
接着编写测试代码:
var reader = new FileReader();
// 通过四种方式读取文件
//reader.readAsXXX(file);
reader.onload = function(){
//查看文件输出内容
console.log(this.result);
//查看文件内容字节大小
console.log(new Blob([this.result]))
}
readAsDataURL
查看图片输出结果:
查看txt输出结果:
很明显,readAsDataURL会将文件内容进行base64编码后输出,这个很好区分。
readAsText
此方法可以通过不同的编码方式读取字符,我们使用utf-8
读取
查看图片输出结果:
查看txt输出结果:
readAsText读取文件的单位是字符,故对于文本文件,只要按规定的编码方式读取即可;
而对于媒体文件(图片、音频、视频),其内部组成并不是按字符排列,故采用readAsText读取,会产生乱码,同时也不是最理想的读取文件的方式
readAsBinaryString
查看图片输出结果:
查看txt输出结果:
与readAsText不同的是,readAsBinaryString函数会按字节读取文件内容。
然而诸如0101的二进制数据只能被机器识别,若想对外可见,还是需要进行一次编码,而readAsBinaryString的结果就是读取二进制并编码后的内容。
尽管readAsBinaryString方法可以按字节读取文件,但由于读取后的内容被编码为字符,大小会受到影响,故不适合直接传输,也不推荐使用。
如:测试的图片文件原大小为6764 字节,而通过readAsBinaryString读取后,内容被扩充到10092个字节
readAsArrayBuffer
查看图片输出结果:
查看txt输出结果:
与readAsBinaryString类似,readAsArrayBuffer方法会按字节读取文件内容,并转换为ArrayBuffer对象。
我们可以关注下文件读取后大小,与原文件大小一致。
这也就是readAsArrayBuffer与readAsBinaryString方法的区别,readAsArrayBuffer读取文件后,会在内存中创建一个ArrayBuffer对象(二进制缓冲区),将二进制数据存放在其中。通过此方式,我们可以直接在网络中传输二进制内容。
好了说这么多,那ArrayBuffer到底是个毛?
关于ArrayBuffer对象牵涉的知识点比较多,完全可以单开一篇细说,在此只要简单理解为存放了一段二进制数据的内存空间即可。
而本身ArrayBuffer中的内容对外是不可见的,若要查看其中的内容,就要引入另一个概念:类型化数组
我们可以尝试查看下刚刚通过readAsArrayBuffer方法读取的图片文件内容:
可以看到,整个图片文件的6764个字节,被分别存储在长度为6764的数组中,而数组中每一个元素的值,为当前字节的十进制数值。
关于ArrayBuffer和类型化数组的概念在此不做深入解释,之后会再写一篇单独讨论。
应用场景
说了这么多,最后还是要落实到FileReader能解决什么问题,下面通过几个例子说明:
在线预览本地文件
我们知道,img的src属性或background的url属性,可以通过被赋值为图片网络地址或base64的方式显示图片。
在文件上传中,我们一般会先将本地文件上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示。
通过FileReader的readAsDataURL方法,我们可以不经过后台,直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程,减少服务器端无用的图片资源,代码如下:
var input = document.getElementById("file"); // input file
input.onchange = function(){
var file = this.files[0];
if(!!file){
var reader = new FileReader();
// 图片文件转换为base64
reader.readAsDataURL(file);
reader.onload = function(){
// 显示图片
document.getElementById("file_img").src = this.result;
}
}
}
运行效果如下:
对于图片上传,我们也可以先将图片转换为base64进行传输,此时由于传输的图片内容就是一段字符串,故上传接口可以当做普通post接口处理,当图片传输到后台后,可以在转换为文件实体存储。
当然,考虑到base64转换效率及其本身的大小,本方法还是适合于上传内容简单或所占内存较小的文件。
二进制数据上传
HTML5体系的建立引入了一大堆新的东西,基于XHR2,我们可以直接上传或下载二进制内容,无需像以往一样通过form标签由后端拉取二进制内容。
简单整理下上传逻辑:
1、通过input[type="file"]标签获取本地文件File对象
2、通过FileReader的readAsArrayBuffer方法将File对象转换为ArrayBuffer
3、创建xhr对象,配置请求信息
4、通过xhr.sendAsBinary直接将文件的ArrayBuffer内容装填至post body后发送
代码实现如下:
var input = document.getElementById("file"); // input file
input.onchange = function(){
var file = this.files[0];
if(!!file){
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function(){
var binary = this.result;
upload(binary);
}
}
}
//文件上传
function upload(binary){
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://xxxx/opload");
xhr.overrideMimeType("application/octet-stream");
//直接发送二进制数据
if(xhr.sendAsBinary){
xhr.sendAsBinary(binary);
}else{
xhr.send(binary);
}
// 监听变化
xhr.onreadystatechange = function(e){
if(xhr.readyState===4){
if(xhr.status===200){
// 响应成功
}
}
}
}
总结
本篇主要介绍了FileReader对象的属性及应用场景,有了FileReader,我们可以将本地文件读取到内存中。文中我们提到了ArrayBuffer和类型化数组的概念,这使得我们可以在内存中进一步操作二进制数据,关于这部分内容,会在之后的博客中进行归纳。
参考资料
[1] MDN_FileReader
[2] Unicode 和 UTF-8 有何区别
[HTML5] FileReader对象的更多相关文章
- HTML5 FileReader读取Blob对象API详解
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...
- html5中的FileReader对象
表单中有图片选项,选中图片文件之后要求可以预览.这个功能很多控件都封装好了,但是它们的底层都是FileReader对象. FileReader对象提供了丰富的功能,包括以二进制.以文本方式读取文件内容 ...
- FileReader对象
在一些项目中,经常会遇到图片上传的情况,为了提高用户体验,一般会要求选择图片后 能预览一下图片. 以前的做法是 通过 ajax上传图片后,然后再显示出来,这样会产生大量的无用的图片文件,在HTML5的 ...
- 前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输
HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...
- H5 FileReader对象
前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...
- 使用 html5 FileReader 获取图片, 并异步上传到服务器 (不使用 iframe)
为什么80%的码农都做不了架构师?>>> 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码post到服务器. 3.根据 ...
- 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe) 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...
- HTML5 File 对象
实例说明1: <div class="container"> <input type="file" id="file" m ...
- 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。
一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...
随机推荐
- SimpleSSO:使用Microsoft.Owin.Security.OAuth搭建OAuth2.0授权服务端
目录 前言 OAuth2.0简介 授权模式 (SimpleSSO示例) 使用Microsoft.Owin.Security.SimpleSSO模拟OpenID认证 通过authorization co ...
- 关于 .NET Core 动态链接库的开发
上个月月底,VS2017RC版发布了,一个很大的特点就是将原来的xProj文件又改回了csproj了. 这样一改,其实很多新的问题也暴露出来了,最严重的问题就是Net版本兼容性. 原来的Net体系大致 ...
- struts2学习之旅三 权限管理和导航设计
1,权限管理的db设计和dao实现,尽量简单快速有效: db的设计如下:权限按照角色来赋给用户: 权限对应每一个具体的功能,有菜单级别的,有导航级别的,还有页面级别的功能: 涉及到权限的敏感操作一般都 ...
- python学习笔记1:python入门
关于版本的选择 按照网上的说法,如果python是为了在工作中使用,选择2.7版本的.这里我选择2.7.9版本的来进行学习: Python是什么? 是一种高级的计算机程序设计语言.应用范围比较广,go ...
- El表达式的关系运算符
El表达式的关系运算符: == 对应 eq != 对应 ne > 对应 gt < 对应 It
- /etc/sysconfig/下找不到iptables文件解决方法
时间:2014-12-19 01:17来源:csdn 作者:大智 举报 点击:5639次 本想做些防火墙策略.防火墙策略都是写在/etc/sysconfig/iptables文件里面的.可我发现我也没 ...
- 【重大更新】开源跨平台物联网通讯框架ServerSuperIO 2.0(SSIO)下载
更新具体细节参见:[更新设计]跨平台物联网通讯框架ServerSuperIO 2.0 ,功能.BUG.细节说明,以及升级思考过程! 声明:公司在建设工业大数据平台,SSIO正好能派上用场,所以抓紧时间 ...
- Node节点
1.Node:节点元素节点->HTML标签文本节点->文字 但是在标准浏览器(除了IE6~8)中会把空格和换行都当做文本节点来处理注释节点->注释document2.节点的特征元素节 ...
- 缓冲区溢出利用——捕获eip的傻瓜式指南
[译文] 摘要:为一个简单的有漏洞程序写一个简单的缓冲区溢出EXP,聚焦于遇到的问题和关键性的教训,提供详细而彻底的描述 内容表:1. I pity the fool, who can't smash ...
- dotnet core 使用 MongoDB 进行高性能Nosql数据库操作
好久没有写过Blog, 每天看着开源的Java社区流口水, 心里满不是滋味. 终于等到了今年六月份 dotnet core 的正式发布, 看着dotnet 社区也一步一步走向繁荣, 一片蒸蒸日上的大好 ...