介绍

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

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

准备工作

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

<input type="file" id="files" multiple />
<div id="list"></div>
<div id="images"></div>
<!-- File API相关操作写在了script.js中 -->
<script src="./script.js"></script>

检测兼容性

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

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

监听文件选择

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

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

文件属性-File

event.target.files 是一个FileList对象，它是一个由File对象组成的列表。

每个 File 对象，保存着选中的对应文件的属性。常用的有：

下面，通过 type 属性，过滤掉非图片类型的文件，只展示图片类型文件的信息：

Powered by Fruition