利用ArrayBuffer在线预览指定文件夹下的所有内容

这是我参与更文挑战的第9天，活动详情查看：更文挑战

效果

先上效果图，非常朴素，没有用代码高亮插件，无样式表

完整实例源码

ArrayBuffer是什么

ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图（TypedArray视图和DataView视图)来读写，视图的作用是以指定格式解读二进制数据。

货比较硬，这里就不展开详细介绍，后续还是通过实例的方式介绍一下这些硬货的用处

详细了解: 推荐阅读ECMAScript 6 入门 – ArrayBuffer 对象

读取文件内容

通过使用 FileReader.readAsArrayBuffer方法将File对象转为ArrayBuffer
使用TextDecoder将内容转为utf8格式的文本

function readFile2Text(file) {
    const fileReader = new FileReader()
    fileReader.readAsArrayBuffer(file)
    return new Promise(resolve=>{
        fileReader.onload = function () {
            const buf = this.result
            const textDecoder = new TextDecoder('utf8')
            resolve(textDecoder.decode(buf))
        }
    })
}
复制代码

当然这里也可直接用FileReader.readAsText

为了契合主题强行readAsArrayBuffer

function readFile2Text(file) {
    const fileReader = new FileReader()
    fileReader.readAsText(file)
    return new Promise(resolve=>{
        fileReader.onload = function () {
            resolve(this.result)
        }
    })
}
复制代码

读取指定目录下的所有文件

使用input标签选择目录，只需要给input标签添加webkitdirectory与multiple属性即可,详细介绍请查阅MDN:<input type=”file”>:

webkitdirectory: 只允许选择目录
multople: 允许选择多个文件

页面代码

<input type="file" id="file" webkitdirectory multiple>
复制代码

监听dom的onchange事件，获取选择的所有文件（不包含空目录）

逻辑

const $file = document.getElementById('file')

// 选择目录
$file.onchange = function () {
    const files = this.files
    // 打印获取所有的文件
    console.log(files)
}
复制代码

每个file对象包含以下属性

{
    name: String, // 文件吗
    size: Number, // 文件大小
    type: String, // 文件MIME类型
    webkitRelativePath: String, // 文件相对路径
}
复制代码

树型目录生成

使用ul配合li实现

Dom结构

<div id="lists" style="width: 36%;">
    <ul>
        <li path="test" deep="0">test
            <ul>
                <li path="test/logo.jpeg" deep="1">logo.jpeg</li>
                <li path="test/1" deep="1">1
                    <ul>
                        <li path="test/1/1-2" deep="2">1-2
                            <ul>
                                <li path="test/1/1-2/index.js" deep="3">index.js</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
复制代码