FileAPI

介绍

HTML5 为我们提供了 File API 相关规范。主要涉及 File 接口 和 FileReader 对象 。

本文整理了兼容性检测、文件选择、属性读取、文件读取、进度监控、大文件分片上传以及拖拽上传等开发中常见的前端文件操作。

准备工作

首先，我们的 File 来自于 标签中选中的文件列表。所以，准备如下的 HTML 代码：

检测兼容性

File 对象是特殊类型的 Blob。在 script 入口处，应该检测当前浏览器是否支持 File API：

if (!(window.File && window.FileReader && window.FileList && window.Blob)) { throw new Error("当前浏览器对FileAPI的支持不完善");}

监听文件选择

对于 type 为 file 类型的 标签，在选择文件的时候，会触发 change 事件。用户选中的文件信息也会传入回调函数的第一个参数中。

function handleFileSelect(event) { const { files } = event.target; if (!files.length) { console.log("没有选择文件"); return; } console.log("选中的文件信息是：