File

File 对象

File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob 对象，所有可以使用 Blob 对象的场合都可以使用它。

最常见的使用场合是表单的文件上传控件（<input type="file">），用户选中文件以后，浏览器就会生成一个数组，里面是每一个用户选中的文件，它们都是 File 实例对象。

构造函数

浏览器原生提供一个File()构造函数，用来生成 File 实例对象。

new File(array, name [, options])

File()构造函数接受三个参数。

array：一个数组，成员可以是二进制对象或字符串，表示文件的内容。
name：字符串，表示文件名或文件路径。
options：配置对象，设置实例的属性。该参数可选。

第三个参数配置对象，可以设置两个属性。

type：字符串，表示实例对象的 MIME 类型，默认值为空字符串。
lastModified：时间戳，表示上次修改的时间，默认为Date.now()。

实例属性和实例方法

File 对象有以下实例属性。

f.lastModified：最后修改时间
f.name：文件名或文件路径
f.size：文件大小（单位字节）
f.type：文件的 MIME 类型

var myFile = new File([], 'file.bin', {
  lastModified: new Date(2022, 1, 1),
});
myFile.lastModified // 1517414400000
myFile.name // "file.bin"
myFile.size // 0
myFile.type // ""

上面代码中，由于myFile的内容为空，也没有设置 MIME 类型，所以size属性等于0，type属性等于空字符串。

File 对象没有自己的实例方法，由于继承了 Blob 对象，因此可以使用 Blob 的实例方法slice()。

FileList 对象

FileList对象是一个类数组对象，代表一组选中的文件，每个成员都是一个 File 实例。它主要出现在两个场合。

<input type="file">元素的files属性，返回一个 FileList 实例。
拖拉一组文件时，目标区的DataTransfer.files属性，返回一个 FileList 实例。

FileList 的实例属性主要是length，表示包含多少个文件。

FileReader 对象

FileReader 对象用于读取 File 对象或 Blob 对象所包含的文件内容。

浏览器原生提供一个FileReader构造函数，用来生成 FileReader 实例。

var reader = new FileReader();

FileReader 有以下的实例属性。

FileReader.error：读取文件时产生的错误对象
FileReader.readyState：整数，表示读取文件时的当前状态。一共有三种可能的状态，0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成。
FileReader.result：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。
FileReader.onabort：abort--用户终止读取操作的监听。
FileReader.onerror：error--读取错误的监听。
FileReader.onload：load--读取操作完成的监听，通常在这个函数里面使用result属性，拿到文件内容。
FileReader.onloadstart：loadstart--读取操作开始的监听。
FileReader.onloadend：loadend--读取操作结束的监听。
FileReader.onprogress：progress--读取操作进行中的监听。

下面是监听load事件的一个例子。

html

    <input type="file" id="fileElem" multiple accept=".txt" onchange="handle(event)">
    <div id="content"></div>

    <script>
        const content = document.querySelector('#content')
        function handle(e) {
            const dom = e.target
            const txtFile = dom.files[0]
            const fileReader = new FileReader()
            fileReader.onload = e => {
                content.textContent = e.target.result
            }
            fileReader.readAsText(txtFile)
        }
    </script>

FileReader 有以下实例方法。

f.abort()：终止读取操作，readyState属性将变成2。
f.readAsArrayBuffer()：以 ArrayBuffer 的格式读取文件，读取完成后result属性将返回一个 ArrayBuffer 实例。
f.readAsBinaryString()：读取完成后，result属性将返回原始的二进制字符串。
f.readAsDataURL()：读取完成后，result属性将返回一个 Data URL 格式（Base64 编码）的字符串，代表文件内容。对于图片文件，这个字符串可以用于<img>元素的src属性。注意，这个字符串不能直接进行 Base64 解码，必须把前缀data:*/*;base64,从字符串里删除以后，再进行解码。
f.readAsText()：读取完成后，result属性将返回文件内容的文本字符串。该方法的第一个参数是代表文件的 Blob 实例，第二个参数是可选的，表示文本编码，默认为 UTF-8。

File ​

File 对象 ​

构造函数 ​

实例属性和实例方法 ​

FileList 对象 ​