近来研究点对点的文件传输，想到一种方案FileReader+WebRtc。

当我看到FileReader的时候，哎呀，不错的东西啊，仔细一看属于File API，或者叫做Web API。

File API 官方的文档  File API

MDN的Web APIs|MDN

MDN的 web引用中使用文件

其主要由，FileList,Blob,File,FileReader等组成。

这里我们主要探讨一下FileReader,先看看官方网站的接口定义

  1.   [Constructor, Exposed=Window,Worker]
  2.   interface FileReader: EventTarget {
  3.  
  4.     // async read methods
  5.     void readAsArrayBuffer(Blob blob);
  6.     void readAsText(Blob blob, optional DOMString label);
  7.     void readAsDataURL(Blob blob);
  8.  
  9.     void abort();
  10.  
  11.     // states
  12.     const unsigned short EMPTY = ;
  13.     const unsigned short LOADING = ;
  14.     const unsigned short DONE = ;
  15.  
  16.     readonly attribute unsigned short readyState;
  17.  
  18.     // File or Blob data
  19.     readonly attribute (DOMString or ArrayBuffer)? result;
  20.  
  21.     readonly attribute DOMError? error;
  22.  
  23.     // event handler attributes
  24.     attribute EventHandler onloadstart;
  25.     attribute EventHandler onprogress;
  26.     attribute EventHandler onload;
  27.     attribute EventHandler onabort;
  28.     attribute EventHandler onerror;
  29.     attribute EventHandler onloadend;
  30.  
  31.   };

首先可以看出来，他继承的是EventTarget，这说明什么，哈哈，下面是主要的属性，方法，事件，最好是参考官网API文档。

主要的属性

　　readySate:状态，对应三个枚举值，EMPTY,LOADING,DONE

　　result : 读取完毕后的内容，一般onload后调用。

　　error: 错误，NotFoundError,SecurityError,NotReadableError

主要方法：

　　readAsArrayBuffer:

　　readAsText：

　　readAsDataUrl:

主要事件：

　　onloadstart:准备就绪，开始读取

　　onprogress:在读取或者解码

　　onload:读取完毕

　　onbort:终止，例如调用abort方法

　　onerror:发生错误

　　onloadend:读操作完毕，不管是读取成功还是失败

我就不多说，今天演练的是readAsText，我想到的场景就是在线文本比较，在线JSON格式化，在线文本编辑。

来吧，少年，在线JSON格式化，50行代码做个demo。

源码路径：https://github.com/xiangwenhu/BlogCodes

html代码：

  1. <!DOCTYPE>
  2. <html>
  3.  
  4. <head>
  5.     <title>FileReader 之 readAsText</title>
  6. </head>
  7.  
  8. <body style="margin: 2rem auto">
  9.     <div id="container" style="margin-left: 5rem">
  10.         <input type="file" id="file" onchange="handleFiles(this.files)" />
  11.         <div id="results"></div>
  12.     </div>
  13. </body>
  14. <script src="js/readAsText.js"></script>
  15.  
  16. </html>

js代码：

  1. function handleFiles(files) {
  2.     if (files.length) {
  3.         let file = files[0], reader = new FileReader()
  4.         reader.onload = () => {
  5.             (new JSONParser(reader.result, '#results')).init()
  6.         }
  7.         reader.readAsText(file)
  8.     }
  9. }
  10. class JSONParser {
  11.     constructor(source, selector) {
  12.         this.source = source
  13.         this.selector = selector
  14.         this.results = []
  15.         this.deep = 0
  16.     }
  17.     init() {
  18.         try {
  19.             let json = JSON.parse(this.source)
  20.             this.format(undefined, json)
  21.             document.querySelector(this.selector).innerHTML = this.results.join('<br/>')
  22.         } catch (e) {
  23.             alert(e)
  24.         }
  25.     }
  26.     format(key = '', value) {
  27.         if (value instanceof Array) {
  28.             this.results.push(this.generateLine(key, '['))
  29.             this.deep++
  30.             value.forEach((v, i) => {
  31.                 this.format(i, v)
  32.             })
  33.             this.deep--
  34.             this.results.push(this.generateLine(undefined, ']'))
  35.         } else if (value && typeof value == 'object') {
  36.             this.results.push(this.generateLine(key, '{'))
  37.             Object.keys(value).forEach(k => {
  38.                 this.deep++
  39.                 this.format(k, value[k])
  40.                 this.deep--
  41.             })
  42.             this.results.push(this.generateLine(undefined, '}'))
  43.         } else {
  44.             this.results.push(this.generateLine(key, value))
  45.         }
  46.     }
  47.     generateLine(key, value) {
  48.         let k = key === undefined || key === '' ? '' : `${key}:`,
  49.             v = value === null ? 'null' : value
  50.         return '&nbsp'.repeat(this.deep) + `${k}${v}`
  51.     }
  52. }

效果：

　　

File API文件操作之FileReader的更多相关文章

  1. File API文件操作之FileReader二

    上一篇说了FileAPI中FileReader的readAsText,这里继续上文,说说另外一个API readAsDataURL. 这个接口是将File或者Blob读成base64格式的字符串,然后 ...

  2. JAVASE02-Unit06： 文件操作——File 、 文件操作—— RandomAccessFile

    Unit06: 文件操作--File . 文件操作-- RandomAccessFile java.io.FileFile的每一个实例是用来表示文件系统中的一个文件或目录 package day06; ...

  3. [转]JavaScript文件操作(2)-FileReader

    在上篇文章中,我介绍了在JavaScript操作文件,重点讲了如何取得File对象. 这些对象包含的文件的元数据在上传或者拖放到浏览器中时可以获取到.有了文件当然接下来就是读取文件了. FileRea ...

  4. C使用FILE指针文件操作

    文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名.实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等.文件 ...

  5. 【File】文件操作（初识文件操作一）

    一,初识文件流 看到标题就知道接下来的所有操作对象都是面对文件进行的.那么问题来了.在java中目录是不是也属于文件呢?答案是yes.既然目录也属于文件,那么对于目录跟文件的区分就显现出来了.在接下来 ...

  6. win32 api 文件操作！

    CreateFile打开文件要对文件进行读写等操作,首先必须获得文件句柄,通过该函数可以获得文件句柄,该函数是通向文件世界的大门. ReadFile从文件中读取字节信息.在打开文件获得了文件句柄之后, ...

  7. day8.python文件操作

    打开和关闭文件 open函数 用Python内置的open()函数打开一个文件,创建一个file对象,相关的方法才可以调用它进行读写. file = open(file_name [, access_ ...

  8. ASP.NET 文件操作类

    1.读取文件 2.写入文件 using System; using System.Collections.Generic; using System.IO; using System.Linq; us ...

  9. python 文件操作（二）

    一. 文件的读写 1.找到文件 文件路径:./test.py 2.打开文件 open('文件路径','模式') 模式: r,   以只读的方式打开 w,  打开一个文件只用于写入,如文件已存在,直接重 ...

随机推荐

  1. java web学习笔记 servlet

    关于java web web.xml中一般配置的都是与servlet先关的可以配置servlet filter listener context-param用来配置web应用的启动参数,可用通过Ser ...

  2. 【深度学习系列】用PaddlePaddle和Tensorflow实现经典CNN网络GoogLeNet

    前面讲了LeNet.AlexNet和Vgg,这周来讲讲GoogLeNet.GoogLeNet是由google的Christian Szegedy等人在2014年的论文<Going Deeper ...

  3. Java爬虫——B站弹幕爬取

    如何通过B站视频AV号找到弹幕对应的xml文件号 首先爬取视频网页,将对应视频网页源码获得 就可以找到该视频的av号aid=8678034 还有弹幕序号,cid=14295428 弹幕存放位置为  h ...

  4. Windows Azure系列-- 配置Azure Power Shell

    1.下载Azure Power shell https://azure.microsoft.com/en-us/documentation/articles/powershell-install-co ...

  5. overridePendingTransition介绍

    Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画 它包含两个部分: 一部分是第一个activity退出时的动画: 另外一部分时第二个activity进入时的 ...

  6. Maste Note for OCR / Vote disk Maintenance Operations (ADD/REMOVE/REPLACE/MOVE)

    Doc ID 428681.1 Applies to: Oracle Database - Enterprise Edition - Version 10.2.0.1 to 11.2.0.1.0 [R ...

  7. 初识ajax

    ajax优势:不刷新整个页面,只刷新局部(无刷新) 无刷新的好处: 只更新部分页面,有效利用宽带 提供连续的用户体验 提供类似C/S的交互效果,操作更方面 什么是ajax AJAX :代表 Async ...

  8. AOP入门（转）

    本文转自http://www.cnblogs.com/yanbincn/archive/2012/06/01/2530377.html Aspect Oriented Programming  面向切 ...

  9. 大数据学习（7）Hadoop高可用

    HDFS高可用 通过主从切换实现单NameNode高可用.通过Federation:水平扩展来联合多NameNode个: NameNode高可用 把edits日志从原来的nameNode中分离出来,存 ...

  10. DotNetCore跨平台~功能测试TestHost的使用

    回到目录 之前写了关于自动化测试的相关文章,包括gitlab,unittest,jenkins pipeline等,基于都是功能点的测试,当我们的框架或者业务修改之后,需要走一篇自动化测试,以此来保证 ...