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. 用PHP向mysql添加数据

    <?php $name=$_POST['name']; $gender = $_POST['gender']; $age=$_POST['age']; #连接到数据库 $link = mysql ...

  2. my sql中join的操作

    SQL标准中的Join的类型:  首先,设置表employees和department的数据为:  1.inner join … on操作类型 内连接inner join是基于连接谓词将两张表(如A和 ...

  3. 利用npoi导出Excel

    npoi库是当下最流行的处理Excel.Word.PPT等Office文件格式 npoi的下载地址:http://npoi.codeplex.com/ npoi的官方学习地址: http://www. ...

  4. Get Intensity along a line based on OpenCV

    The interpolate function is used to get intensity of a point which is not on exactly a pixel. The co ...

  5. mobx源码解读1

    mobx是redux的代替品,其本身就是一个很好的MVVM框架.因此花点力气研究一下它. 网上下最新的2.75 function Todo() { this.id = Math.random() mo ...

  6. ulimit

    .修改ulimit vim /etc/security/limits.conf * soft nproc * hard nproc * soft nofile * hard nofile vim /e ...

  7. {Latex}{Tabular}文本超出表格自动换行

    用p或者m可以控制每列的宽度(需载入array宏包). 要整个表格相对于页面居中,用chngpage宏包的adjustwidth,如下: \documentclass[oneside]{article ...

  8. [转帖]FPGA开发工具汇总

    原帖:http://blog.chinaaet.com/yocan/p/5100017074 ----------------------------------------------------- ...

  9. python模块学习心得

    初始模块 1.什么是模块 模块是用来实现某项功能的一大堆代码,为什么会有模块呢?过程式编程的时候为了减少程序员编程代码的重复性,就利用函数的调用减少了代码的重复性,但是某些时候程序会过于的庞大,我们会 ...

  10. 无向图的DFS遍历(方法之一)

    如果看不懂辅助解释在后面第点 1.录入方式: 输入 u - v  表示一边的2个端点 2.存储结构 struct edge { int from; int to; int next; } e[MAXN ...