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" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">

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

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

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

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

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;
//每次读取1M
me.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的使用的更多相关文章

  1. 网站开发进阶(三十二)HTML5之FileReader的使用

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

  2. HTML5 之 FileReader 方法上传并读取文件

    原文地址:https://caochangkui.github.io/file-upload/ HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据 ...

  3. html5使用FileReader上传图片

    客户端代码是网上找的,修改为.net代码. <html><head>    <meta charset="utf-8">    <titl ...

  4. HTML5 使用FileReader实现调用相册、拍照功能

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

  5. HTML5 通过 FileReader 实现文件上传

    概述 在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...

  6. [转] HTML5之FileReader的使用

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

  7. HTML5之FileReader的使用.RP

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

  8. HTML5之fileReader异步读取文件及文件切片读取

    fileReader的方法与事件 fileReade实现图片预加载 fileReade实现文件读取进度条 fileReade的与file.s实现文件切片读取 一.fileReader的方法与事件 1. ...

  9. HTML5 之 FileReader 的使用 (二) (网页上图片拖拽并且预显示可在这里学到) [转载]

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...

随机推荐

  1. JAVA正则表达式介绍和使用

    本文引用自 http://www.cnblogs.com/android-html5/archive/2012/06/02/2533924.html 技术博客 1.Java中在某个字符串中查询某个字符 ...

  2. svn学习笔记(1)入门学习----安装及创建运行仓库

    学习及使用svn有一段时间了,但是以前学习的时候不怎么用,现在用只是简单的更新上传,又把基本理论忘了.为了以后自己看自己的笔记回忆,特此记录 svn学习博客:http://www.cnblogs.co ...

  3. php引用&符号详解——————给变量起小名

    学习了这篇博客[http://blog.csdn.net/jiedushi/article/details/6428585] php中引用采用的是“写时拷贝”的原理,就是除非发生写操作,指向同一个地址 ...

  4. CentOS下IP的配置

    1.打开命令窗口,切换成root账户:su - root 2.进入目录:/etc/sysconfig/network-scripts,打开文件vi ifcfg-eth0 3.修改参数: ## 名称DE ...

  5. Java可读取操作系统的配置

    /** * Java获取操作系统的配置环境 * @throws Exception */ @Test public void testPro() throws Exception { Properti ...

  6. 4_STL设计理念_算法

    STL算法,容器,迭代器的设计理念1.STL容器通过 类模板 技术,实现 数据类型 和 容器模型的分离:2.迭代器技术 实现了 遍历和操作容器的统一方法3.STL算法设计理念:通过预定义的函数对象和函 ...

  7. A+B Problem III-(涉及误差)NYOJ-477

    描述求A+B是否与C相等.   输入 T组测试数据. 每组数据中有三个实数A,B,C(-10000.0<=A,B<=10000.0,-20000.0<=C<=20000.0) ...

  8. 关闭SSMS的事务自动提交,改为手动提交

    SQLServer 2005-2008-2012使用Oracle时,默认是手动提交.而SQLServer2005中,默认是自动提交,但是SQLServer支持配置. 方法: 用SSMS连接到SQL S ...

  9. 将/home目录从单独的分区迁移回/目录下

    安装系统的时候, 将/, swap, /home这三个目录放在了三个不同的分区, 现在希望将/home目录移回/目录下. 1. umount /home, 然后在/目录下创建/home_new, 通过 ...

  10. AIM Tech Round 3 (Div. 2) A B C D

    虽然打的时候是深夜但是状态比较好 但还是犯了好多错误..加分场愣是打成了降分场 ABC都比较水 一会敲完去看D 很快的就想出了求0和1个数的办法 然后一直wa在第四组..快结束的时候B因为低级错误被h ...