HTML5 FileReader对象的具体使用方法_html5教程技巧

来源:脚本之家  责任编辑:小易  

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果www.zgxue.com防采集请勿采集本网。

写在前面

是那个平台?百Android?Iphone?如果是度Iphone那么应该是Webkit内核,可以用safari浏览器调问试。答 调用FileReader接口可以先判断内浏览器是否支持,代码如下: if(window.FileReader){ var

前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍。

用InputStreamReader代替FileReader

FileReader

http://jingyan.baidu.com/article/295430f12996ed0c7f005047.html 你好,朋友。这条百度经验的内容就是你想要的答案。麻烦采纳下,谢谢!

FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件。

编码问题,你Txt文件是什么编码格式的,你可以另存为一下存顾UFT-8试试

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据。

关于这个问题,打开360浏览器,360浏览器右下角点击下载,点击设置,设置默认的下载工具用迅雷即可。

创建实例

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 fileinput.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 fileinput.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 fileinput.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对象内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

FileReader 对象FileReader 对象主要用来把文件读入内存,并且读取文件中的数据。通过构造函数创建一个 FileReader 对象。这个文件读取对象有以下几种方法:1.readAsText():读取文本文件(可以使用Txt打开的文件),返回文本字符串,默认编码是UTF-8。2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看,而是存储文件。例如:读取文件的内容,获取二进制数据,传递给后台,后台接收了数据之后,再将数据存储。3.readAsDataURL():读取文件获取一段以data开头的字符串,这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式,并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。4.abort():中断读取该对象常见应用在即时预览:即时:当用户选择完图片之后就立刻进行预览的处理>>onchange预览:通过文件读取对象的readAsDataURL()完成。其中获取数据时,FileReader还提供一个完整的事件模型,用来捕获读取文件时的状态。onabort:读取文件中断片时触发onerror:读取错误时触发onload:文件读取成功完成时触发onloadend:读取完成时触发,无论成功还是失败onloadstart:开始读取时触发onprogress:读取文件过程中持续触发(BY三人行慕课)内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 浅谈html5 filereader分布读取文件以及其方法简介
  • html5 文件域+filereader 分段读取文件并上传到服务器
  • html5中filereader接口使用方法实例详解
  • html5 filereader实现即时上传图片功能实例代码
  • HTML5中FileReader怎么使用?
  • html5的filereader是怎么啦
  • filereader只能html5吗
  • 如何用HTML5的FileReader生成Data Url
  • HTML5 FileReader API 在微信里失效怎么解决?
  • HTML5的文件读取对象FileReader如何将不同编码格式的本地文件转换为统一编码?
  • 如何用HTML5的FileReader生成Data Url
  • HTML5中,使用FileReader下的readAsText()读取一个含中文的txt格式文件出现乱码
  • 如何让360浏览器支持html5的window.FileReader
  • HTML5的File API报错:Argument 1 of FileReader.readAsText is not an object.
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5html5filereader浅谈html5 filereader分布读取文件以及其方法简介html5 文件域+filereader 分段读取文件并上传到服务器html5中filereader接口使用方法实例详解html5 filereader实现即时上传图片功能实例代码html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解详解如何获取localstorage最大存储大小的方法html5的pushstate以及监听浏览器返回事件的实现html5用video标签流式加载的实现video.js支持m3u8格式直播的实现示例video实现有声音自动播放的实现方法基于html5 canvas做批改作业的小插件video下autoplay属性无效的解决方法(添加muted属性)html2canvas生成的图片偏移不完整的解决方法html5简介及新增功能介绍html5让容器充满屏幕高度或自适应剩余高度的布局实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved