1. JavaScript File API 核心对象与工作原理
1.1 关键对象：File、Blob、FileList 的关系
在JavaScript File API中，File对象表示用户在浏览器中选取的单个文件，Blob是一个通用的二进制数据块，而FileList则是一个包含多个File对象的集合。通过这组对象，网页可以读取、组合或展示本地文件数据。
File与Blob的关系很紧密：File是Blob的一个子类，除了数据之外，还具备名字、最后修改时间等元数据信息，这些信息对文件的处理很有帮助。
1.2 浏览器如何提供与限制
浏览器实现了FileReader、URL.createObjectURL等核心接口来操作文件数据，兼容性方面在主流浏览器均支持，但对于老版本浏览器仍需回退方案。
FileReader用于读取文件内容为文本、ArrayBuffer或DataURL等格式，Blob可用于合并、切片和作进一步处理，URL.createObjectURL可将文件以对象URL形式快速展示在页面上。
2. 选择文件并获取 FileList
2.1 通过 input[type=file] 获取 FileList
要让用户选择文件，最常用的方式是使用，用户选择后可通过输入控件的 files 属性获得FileList，其中包含File对象。这个过程是前端最常见的
在事件处理函数中，e.target.files返回的就是FileList，可以用循环遍历读取每一个File的元数据或内容。
2.2 通过拖放获取 FileList
除了文件输入框，现代网页还支持拖放功能来获取FileList，通过监听dragover和drop事件，阻止默认行为后即可从 DataTransfer对象中获取files。
在拖放场景中，DataTransfer.files提供了与类似的
3. 使用 FileReader 读取文件内容
3.1 读取文本内容
要读取文本文件的内容，可以使用FileReader.readAsText，该方法将选中的文件以文本形式加载到内存中，完成后触发load事件并在result属性中返回文本。
读取文本是大多数配置文件、JSON、CSV等格式文件的常见需求，结合异步事件模式可以实现流式处理。
// HTML: <input type="file" id="fileInput">
const input = document.getElementById('fileInput');
input.addEventListener('change', (e) => {const file = e.target.files[0];if (!file) return;const reader = new FileReader();reader.onload = () => {const text = reader.result; // 文本内容console.log(text);};reader.onerror = (err) => {console.error('读取文本失败', err);};reader.readAsText(file); // 读取为文本
});3.2 读取二进制数据与图片
除了文本，readAsArrayBuffer和readAsDataURL用于读取二进制内容和图片等二进制数据。ArrayBuffer适合后续的二进制处理，DataURL可直接用作图像或下载链接。
// 读取为 ArrayBuffer
reader.onload = () => {const buffer = reader.result; // ArrayBuffer// 对二进制进行处理
};// 读取为 DataURL，常用于图片预览
reader.onload = () => {const dataURL = reader.result; // DataURLconst img = document.getElementById('preview');img.src = dataURL;
};
reader.readAsArrayBuffer(file); // 或者 reader.readAsDataURL(file)3.3 错误处理与进度事件
在实际应用中，onerror、onloadend等事件用于错误处理和清理工作，onprogress事件则可以实现文件读取进度反馈，提升用户体验。
reader.onprogress = (ev) => {if (ev.lengthComputable) {const percent = (ev.loaded / ev.total) * 100;console.log(`读取进度: ${percent.toFixed(2)}%`);}
};4. Blob、URL 与对象 URL 的使用
4.1 通过 URL.createObjectURL 展示文件
使用URL.createObjectURL可以将一个Blob或File转换为一个临时的对象 URL，从而迅速在页面中展示或下载，无需将数据上传到服务器。
创建对象 URL 后，建议在不再需要时调用URL.revokeObjectURL来释放内存，避免长期占用资源。
const img = document.createElement('img');
const url = URL.createObjectURL(file); // file 是 File/File 对象
img.src = url;
document.body.appendChild(img);// 使用完成后释放
URL.revokeObjectURL(url);4.2 结合 Blob 做文件拼接或分段处理
通过Blob与数组缓冲区的组合，可以把多个文件片段合并成一个新的二进制 Blob，例如把文本片段与图片段拼成一个自定义格式，new Blob的使用很灵活。
const part1 = new Blob(['Hello '], {type: 'text/plain'});
const part2 = new Blob(['World'], {type: 'text/plain'});
const combined = new Blob([part1, part2], {type: 'text/plain'});
5. 高级操作与注意事项
5.1 文件分片与流式读取的潜在方案
对于超大文件，File API与现代浏览器的 Streams 能结合实现分块读取、减小内存占用，readable streams相关接口可以帮助实现高效的数据处理。
在实现时，优先考虑使用 FileReader 的分块读取或将文件切成块后逐块读取，以避免一次性加载占用过多内存。
5.2 错误处理、取消读取与用户体验
网络请求式的文件读取也可能遇到中断、权限变更等情况，需通过abort等手段取消读取，并给出友好的提示，提升用户体验。
为避免内存泄露，应对创建的ObjectURL进行及时清理，并在必要时释放相关的内存资源。
// 取消读取
const reader = new FileReader();
reader.onload = () => { /* 处理数据 */ };
// 需要取消时
reader.abort();5.3 数据安全与隐私
涉及到本地文件操作时，应仅在用户明确授权的情况下读取数据，不要尝试读取隐私性强的用户文件，并对读取结果做好本地处理与保护。
通过对象 URL 展示的文件也应注意来源与权限，避免将敏感数据暴露在外部环境。
