# File & FileReader

在 JavaScript 中，`File` 和 `FileReader` 对象是处理文件输入和读取文件内容的重要工具。它们通常用于处理用户通过 `<input type="file">` 选择的文件或拖拽到网页上的文件。

## File

`File` 对象继承自 `Blob`，并扩展了与文件系统相关的属性。当你从 `<input>` 元素中选择文件时，会返回一个包含 `File` 对象的列表。

```html
<input type="file" id="fileInput" multiple>
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files; // 获取用户选择的文件列表
    for (let i = 0; i < files.length; i++) {
        console.log(`文件名: ${files[i].name}`);
        console.log(`文件类型: ${files[i].type}`);
        console.log(`文件大小: ${files[i].size} bytes`);
        console.log(`最后修改时间: ${new Date(files[i].lastModified)}`);
    }
});
</script>
```

## FileReader

`FileReader` 接口提供了读取文件的方法。它可以异步地读取文件内容，并将结果以文本、DataURL 或 ArrayBuffer 的形式提供给应用。

### 常用方法

```javascript
const reader = new FileReader();

// 读取文件为字符串
readAsText(file, encoding)

// 读取文件为 DataURL 格式
readAsDataURL(file)

// 读取文件为 ArrayBuffer
readAsArrayBuffer(file) 
```

### 事件监听器

```javascript
const reader = new FileReader();
reader.readAsText(file);

// 开始加载时触发
reader.onloadstart = () => {}

// 加载过程中周期性触发
reader.onprogress = () => {}

// 成功读取后触发
reader.onload = () => {}

// 出现错误时触发
reader.onerror = () => {}

// 取消读取时触发
reader.onabort = () => {}

// 无论成功还是失败都会触发
reader.onloadend = () => {}
```
