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

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

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

  1. if(window.FileReader) {
  2. var fr = new FileReader();
  3. // add your code here
  4. }
  5. else {
  6. alert("Not supported by your browser!");
  7. }

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 ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。

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

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

  1. <script type="text/javascript">
  2. function showPreview(source) {
  3. var file = source.files[0];
  4. if(window.FileReader) {
  5. var fr = new FileReader();
  6. fr.onloadend = function(e) {
  7. document.getElementById("portrait").src = e.target.result;
  8. };
  9. fr.readAsDataURL(file);
  10. }
  11. }
  12. </script>
  13. <input type="file" name="file" onchange="showPreview(this)" />
  14. <img id="portrait" src="" width="70" height="75">

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

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

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

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

  1. <form>
  2. <fieldset>
  3. <legend>分度读取文件:</legend>
  4. <input type="file" id="File" />
  5. <input type="button" value="中断" id="Abort" />
  6. <p>
  7. <label>读取进度:</label><progress id="Progress" value="0" max="100"></progress>
  8. </p>
  9. <p id="Status"></p>
  10. </fieldset>
  11. </form>
    1. var h = {
    2. init: function() {
    3. var me = this;
    4. document.getElementById('File').onchange = me.fileHandler;
    5. document.getElementById('Abort').onclick = me.abortHandler;
    6. me.status = document.getElementById('Status');
    7. me.progress = document.getElementById('Progress');
    8. me.percent = document.getElementById('Percent');
    9. me.loaded = 0;
    10. //每次读取1M
    11. me.step = 1024 * 1024;
    12. me.times = 0;
    13. },
    14. fileHandler: function(e) {
    15. var me = h;
    16. var file = me.file = this.files[0];
    17. var reader = me.reader = new FileReader();
    18. //
    19. me.total = file.size;
    20. reader.onloadstart = me.onLoadStart;
    21. reader.onprogress = me.onProgress;
    22. reader.onabort = me.onAbort;
    23. reader.onerror = me.onerror;
    24. reader.onload = me.onLoad;
    25. reader.onloadend = me.onLoadEnd;
    26. //读取第一块
    27. me.readBlob(file, 0);
    28. },
    29. onLoadStart: function() {
    30. var me = h;
    31. },
    32. onProgress: function(e) {
    33. var me = h;
    34. me.loaded += e.loaded;
    35. //更新进度条
    36. me.progress.value = (me.loaded / me.total) * 100;
    37. },
    38. onAbort: function() {
    39. var me = h;
    40. },
    41. onError: function() {
    42. var me = h;
    43. },
    44. onLoad: function() {
    45. var me = h;
    46. if(me.loaded < me.total) {
    47. me.readBlob(me.loaded);
    48. } else {
    49. me.loaded = me.total;
    50. }
    51. },
    52. onLoadEnd: function() {
    53. var me = h;
    54. },
    55. readBlob: function(start) {
    56. var me = h;
    57. var blob,
    58. file = me.file;
    59. me.times += 1;
    60. if(file.webkitSlice) {
    61. blob = file.webkitSlice(start, start + me.step + 1);
    62. } else if(file.mozSlice) {
    63. blob = file.mozSlice(start, start + me.step + 1);
    64. }
    65. me.reader.readAsText(blob);
    66. },
    67. abortHandler: function() {
    68. var me = h;
    69. if(me.reader) {
    70. me.reader.abort();
    71. }
    72. }
    73. };
    74. h.init();

H5学习系列之文件读取API--本文转自http://blog.csdn.net/jackfrued/article/details/8967667的更多相关文章

  1. 学习mongoDB的一些感受(转自:http://blog.csdn.net/liusong0605/article/details/11581019)

    曾经使用过mongoDB来保存文件,最一开始,只是想总结一下在开发中如何实现文件与mongoDB之间的交互.在此之前,并没有系统的了解过mongoDB,虽然知道我们用它来存储文件这些非结构化数据,但是 ...

  2. Cesium学习笔记(五):3D 模型 (http://blog.csdn.net/umgsoil/article/details/74572877)

    Cesium支持3D模型,包括关键帧动画,皮肤的改变还有单个节点的选择等,Cesium还提供了了一个基于网络的工具,将COLLADA模型转换为glTF,方便和优化模型添加 还记得我们在实体添加的时候添 ...

  3. K8S 使用NFS 创建PV和PVC的例子 学习From https://blog.csdn.net/xts_huangxin/article/details/51494472

    1. 获取资料 网址: https://blog.csdn.net/xts_huangxin/article/details/51494472  感谢原作者 这里面 按照自己的机器情况进行了学习模仿 ...

  4. 向txt文件中写入内容(覆盖重写与在末尾续写+FileOutputStream与FileWriter)(转发:https://blog.csdn.net/bestcxx/article/details/51381460)

    !!!! 读取txt文件中的内容 import java.io.BufferedReader; import java.io.File; import java.io.FileReader; /** ...

  5. maven 依赖文件 pom.xml 编译 mvn compile 运行 不用mvn exec:java -Dexec.mainClass="hello.HelloWorld" 打成jar包 mvn package mvn install http://blog.csdn.net/yaya1943/article/details/48464371

    使用maven编译Java项目 http://blog.csdn.net/yaya1943/article/details/48464371  使用"mvn clean"命令清除编 ...

  6. Socket的用法——NIO包下SocketChannel的用法 ———————————————— 版权声明:本文为CSDN博主「茶_小哥」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/ycgslh/article/details/79604074

    服务端代码实现如下,其中包括一个静态内部类Handler来作为处理器,处理不同的操作.注意在遍历选择键集合时,没处理完一个操作,要将该请求在集合中移除./*模拟服务端-nio-Socket实现*/pu ...

  7. 解析Javascript事件冒泡机制(转) 本文转自:http://blog.csdn.net/luanlouis/article/details/23927347

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...

  8. jbpm的学习 出处http://blog.csdn.net/hxirui/article/details/1221911

    jbpm入门例子 分类: opensourse2006-09-14 11:30 37308人阅读 评论(22) 收藏 举报 jbpmhibernate数据库oraclemysqltransition ...

  9. OpenGL学习脚印: uniform blocks在着色器中的使用 转自https://blog.csdn.net/wangdingqiaoit/article/details/52717963

    写在前面 目前,我们在着色器中要传递多个uniform变量时,总是使用多个uniform,然后在主程序中设置这些变量的值:同时如果要在多个shader之间共享变量,例如投影矩阵projection和视 ...

随机推荐

  1. nginx缓存设置proxy_cache

    http://www.cnblogs.com/dudu/p/4597351.html http块: proxy_cache_path /tmp/cache levels=1:2 keys_zone=n ...

  2. 7、SQL Server索引、表压缩

    索引 什么是索引? 索引是一种磁盘上的数据结构,建立在表或视图的基础上.使用索引可以使数据的获取更快更高校,也会影响其他的一些性能,如插入或更新等. 索引主要分为两种类型:聚集索引和非聚集索引. 字典 ...

  3. Redis配置文件参数说明

    Redis配置文件参数说明   1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式运行时,Redis ...

  4. 在指定时间干,必须干(kbmmw 中的事件调度)

    从去年开始,kbmmw 慢慢增加内涵,除了完善各种服务外,陆续增加和扩展了作为一个中间件必须有的功能, 例如,权限管理.日志系统.调度系统.内存调试等功能. 今天给大家介绍一下kbmmw 的调度事件, ...

  5. Windows下Eclipse+Scala+Spark开发环境搭建

    1.安装JDK及配置java环境变量 本文使用版本为jdk1.7.0_79,过程略 2.安装scala 本文使用版本为2.11.8,过程略 3.安装spark 本文使用版本为spark-2.0.1-b ...

  6. Easyui表单之下拉列表的三级联动

    一.实现三级联动需要连接数据库 二.需要JSON数据的解析 三.需要Servlet类与界面相对应值的传递 1. 界面层需要的代码如下: <!DOCTYPE html> <html&g ...

  7. CSS3制作同心圆进度条

    1.css代码 此处在制作进度条时,是旋转进度条的半圆(红色),背景使用灰白(如果使用红色作为背景,旋转灰白遮罩,在浏览器中可能会有渲染bug) .wrapper{ display:block;pos ...

  8. 服务器控件中使用<%#...>, JS和html控件中使用<%=...>

    //在服务器控件的属性中,需要用<%#...>来绑定其他控件的ID, 并且要在页面初始方法中,执行Page.DataBind(); <asp:ImageButton ID=" ...

  9. .NET Core Web 应用部署到 Docker 中运行

    环境介绍 : 虚拟机:VirtualBox 5.1.6 系 统:Ubuntu 16.04.1 LTS 系统准备完成后可以使用 sudo apt-get udpate 和 sudo apt-get up ...

  10. html5 自定义验证信息

      h5 为表单新增了很多类型,及属性. 根据这些新增的类型及属性 h5也为我们提供了验证这些数据的js函数,这些验证表单的函数都存在了ValidityState对象中,接下来让我们一起来了解一下这些 ...