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

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

File API 官方的文档  File API

MDN的Web APIs|MDN

MDN的 web引用中使用文件

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

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

  [Constructor, Exposed=Window,Worker]

  interface FileReader: EventTarget {

    // async read methods

    void readAsArrayBuffer(Blob blob);

    void readAsText(Blob blob, optional DOMString label);

    void readAsDataURL(Blob blob);

    void abort();

    // states

    const unsigned short EMPTY = ;

    const unsigned short LOADING = ;

    const unsigned short DONE = ;

    readonly attribute unsigned short readyState;

    // File or Blob data

    readonly attribute (DOMString or ArrayBuffer)? result;

    readonly attribute DOMError? error;

    // event handler attributes

    attribute EventHandler onloadstart;

    attribute EventHandler onprogress;

    attribute EventHandler onload;

    attribute EventHandler onabort;

    attribute EventHandler onerror;

    attribute EventHandler onloadend;

  };

首先可以看出来，他继承的是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代码：

<!DOCTYPE>

<html>

<head>

    <title>FileReader 之 readAsText</title>

</head>

<body style="margin: 2rem auto">

    <div id="container" style="margin-left: 5rem">

        <input type="file" id="file" onchange="handleFiles(this.files)" />

        <div id="results"></div>

    </div>

</body>

<script src="js/readAsText.js"></script>

</html>

js代码：

function handleFiles(files) {

    if (files.length) {

        let file = files[0], reader = new FileReader()

        reader.onload = () => {

            (new JSONParser(reader.result, '#results')).init()

        }

        reader.readAsText(file)

    }

}

class JSONParser {

    constructor(source, selector) {

        this.source = source

        this.selector = selector

        this.results = []

        this.deep = 0

    }

    init() {

        try {

            let json = JSON.parse(this.source)

            this.format(undefined, json)

            document.querySelector(this.selector).innerHTML = this.results.join('<br/>')

        } catch (e) {

            alert(e)

        }

    }

    format(key = '', value) {

        if (value instanceof Array) {

            this.results.push(this.generateLine(key, '['))

            this.deep++

            value.forEach((v, i) => {

                this.format(i, v)

            })

            this.deep--

            this.results.push(this.generateLine(undefined, ']'))

        } else if (value && typeof value == 'object') {

            this.results.push(this.generateLine(key, '{'))

            Object.keys(value).forEach(k => {

                this.deep++

                this.format(k, value[k])

                this.deep--

            })

            this.results.push(this.generateLine(undefined, '}'))

        } else {

            this.results.push(this.generateLine(key, value))

        }

    }

    generateLine(key, value) {

        let k = key === undefined || key === '' ? '' : `${key}:`,

            v = value === null ? 'null' : value

        return '&nbsp'.repeat(this.deep) + `${k}${v}`

    }

}

效果：

　　

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. 【译】使用Jwt身份认证保护 Asp.Net Core Web Api

    原文出自Rui Figueiredo的博客,原文链接<Secure a Web Api in ASP.NET Core> 摘要:这边文章阐述了如何使用 Json Web Token (Jw ...

  2. MySQL系列：高可用架构之MHA

    前言 从11年毕业到现在,工作也好些年头,入坑mysql也有近四年的时间,也捣鼓过像mongodb.redis.cassandra.neo4j等Nosql数据库.其实一直想写博客分享下工作上的零零碎碎 ...

  3. 机器学习笔记1 - Hello World In Machine Learning

    前言 Alpha Go在16年以4:1的战绩打败了李世石,17年又以3:0的战绩战胜了中国围棋天才柯洁,这真是科技界振奋人心的进步.伴随着媒体的大量宣传,此事变成了妇孺皆知的大事件.大家又开始激烈的讨 ...

  4. [NOIP复习]第三章：动态规划

    一.背包问题 最基础的一类动规问题.相似之处在于给n个物品或无穷多物品或不同种类的物品,每种物品仅仅有一个或若干个,给一个背包装入这些物品,要求在不超出背包容量的范围内,使得获得的价值或占用体积尽可能 ...

  5. Node.js开发Web后台服务

    一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

  6. 如何在Intellij IDEA中拉svn分支?

    由于用IDEA时间也不是特别长,对操作svn的一些东西,不是特别熟悉,特此记录一下,以做备忘. 先说下流程: 在IDEA里面对trunk代码拉分支熟悉了,其实很容易, (1)你trunk目录下的得有个 ...

  7. Python3 将txt数据转换成列表，进行排序，筛选

    Python 程序员需要知道的 30 个技巧 首先是数据: 将上边的四个数据分别写在新建的txt文件中 1.将txt数据转为列表 with open('james.txt') as jaf: data ...

  8. java.lang.StringBuilder和java.lang.StringBuffer (JDK1.8)

    这两个类都是继承自AbstractStringBuilder,AbstractStringBuilder有两个成员属性 char[] value; int count; 前者用于存储字符串,后者用于统 ...

  9. android 串口开发第二篇:利用jni实现android和串口通信

    一:串口通信简介 由于串口开发涉及到jni,所以开发环境需要支持ndk开发,如果未配置ndk配置的朋友,或者对jni不熟悉的朋友,请查看上一篇文章,android 串口开发第一篇:搭建ndk开发环境以 ...

  10. AVL树的单双旋转操作

    把必须重新平衡的节点称为å.对于二叉树,å的两棵子树的高度最多相差2,这种不平衡可能有四种情况: 对å的左儿子的左子树进行插入节点(左-左) 对å的左儿子的右子树进行插入节点(左-右) 对å的右儿子的 ...