HTML5之FileReader的使用

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

FileReader的使用方式非常简单，可以按照如下步骤创建FileReader对象并调用其方法：

1.检测浏览器对FileReader的支持

if(window.FileReader) {var fr = new FileReader();// add your code here
}
else {alert("Not supported by your browser!");
}

2. 调用FileReader对象的方法

FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，需要注意的是，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

3. 处理事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

fr.onload = function() {this.result;
};

下面通过一个上传图片预览和带进度条上传来展示FileReader的使用。

<script type="text/javascript">function showPreview(source) {var file = source.files[0];if(window.FileReader) {var fr = new FileReader();fr.onloadend = function(e) {document.getElementById("portrait").src = e.target.result;};fr.readAsDataURL(file);}}</script><input type="file" name="file" οnchange="showPreview(this)" /><img id="portrait" src="" width="70" height="75">

如果要限定上传文件的类型，可以通过文件选择器获取文件对象并通过type属性来检查文件类型

if(!/image\/\w+/.test(file.type)){alert("请确保文件为图像类型");return false;
}

不难发现这个检测是基于正则表达式的，因此可以进行各种复杂的匹配，非常有用。

如果要增加一个进度条，可以使用HTML 5的progress标签，通过下面的代码实现。

<form><fieldset><legend>分度读取文件：</legend><input type="file" id="File" /><input type="button" value="中断" id="Abort" /><p><label>读取进度：</label><progress id="Progress" value="0" max="100"></progress></p><p id="Status"></p></fieldset>
</form>

var h = {init: function() {var me = this;document.getElementById('File').onchange = me.fileHandler;document.getElementById('Abort').onclick = me.abortHandler;me.status = document.getElementById('Status');me.progress = document.getElementById('Progress');me.percent = document.getElementById('Percent');me.loaded = 0;//每次读取1Mme.step = 1024 * 1024;me.times = 0;},fileHandler: function(e) {var me = h;var file = me.file = this.files[0];var reader = me.reader = new FileReader();//me.total = file.size;reader.onloadstart = me.onLoadStart;reader.onprogress = me.onProgress;reader.onabort = me.onAbort;reader.onerror = me.onerror;reader.onload = me.onLoad;reader.onloadend = me.onLoadEnd;//读取第一块me.readBlob(file, 0);},onLoadStart: function() {var me = h;},onProgress: function(e) {var me = h;me.loaded += e.loaded;//更新进度条me.progress.value = (me.loaded / me.total) * 100;},onAbort: function() {var me = h;},onError: function() {var me = h;},onLoad: function() {var me = h;if(me.loaded < me.total) {me.readBlob(me.loaded);} else {me.loaded = me.total;}},onLoadEnd: function() {var me = h;},readBlob: function(start) {var me = h;var blob,file = me.file;me.times += 1;if(file.webkitSlice) {blob = file.webkitSlice(start, start + me.step + 1);} else if(file.mozSlice) {blob = file.mozSlice(start, start + me.step + 1);}me.reader.readAsText(blob);},abortHandler: function() {var me = h;if(me.reader) {me.reader.abort();}}
};h.init();

HTML5之FileReader的使用相关推荐

HTML5的FileReader用法
要想在页面上显示本地图片,以前我们通常的做法是将选择的图片文件上传至后端服务器,后端对其进行存储,再将图片的URL返回到前端,前端通过这个URL来显示图片.而HTML5的FileReader接口支持本 ...
HTML5 通过 FileReader 实现文件上传
概述在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...
html访问手机相册,使用HTML5的FileReader读取手机图片(还可选择拍照), 并自动异步上传到服务器上...
使用html5 FileReader获取图片,并异步上传到服务器(not iframe) body{margin: 0px; background:#f2f2f0;} p{margin:0px;} . ...
网站开发进阶(三十二)HTML5之FileReader的使用
一.前言 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使 ...
html5的FileReader文件读取
此文引用:http://blog.csdn.net/jackfrued/article/details/8967667 一:FileReader FileReader是API重要成员用于读取文件,Fi ...
html5 txt文件上传,JavaScript html5利用FileReader实现上传功能
本文实例为大家分享了H5利用FileReader上传文件的具体代码,供大家参考,具体内容如下 1. Html部分文件上传演练 Browse... 2. JS部分 var result = docum ...
HTML5 用FileReader对象读取图片
FileReader.readAsDataURL(File对象)方法,可将File转位base64格式.img元素的src属性.其他元素的background属性都能被赋值为base64格式,这样可以 ...
html5 FileReader初识
使用html5的FileReader可以实现多媒体文件的预览功能,代码如下: <html> <head> <script type="text/javascri ...
Html5 FileReader 对文件进行Base64编码
以Base64进行编码的数据Url开始越来越广泛的被应用起来,原来做Base64转换要自己写一个小程序来转,其实Html5的FileReader的readAsDataURL方法读取出的数据就已经是Ba ...

HTML5之FileReader的使用

HTML5之FileReader的使用相关推荐

最新文章

热门文章