File API文件操做之FileReader

時間 2019-11-26

標籤 file api 文件 filereader 简体版

原文原文鏈接

近來研究點對點的文件傳輸，想到一種方案FileReader+WebRtc。html

當我看到FileReader的時候，哎呀，不錯的東西啊，仔細一看屬於File API，或者叫作Web API。git

File API 官方的文檔 File APIgithub

MDN的Web APIs|MDNweb

MDN的 web引用中使用文件json

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

這裏咱們主要探討一下FileReader,先看看官方網站的接口定義async

  [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 = 0;
    const unsigned short LOADING = 1;
    const unsigned short DONE = 2;


    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文檔。網站

主要的屬性 this

　　readySate:狀態，對應三個枚舉值，EMPTY,LOADING,DONEspa

　　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}`
    }
}