「HTML5 进阶」FileAPI 文件操作实战，内附详细案例，建议收藏 _FileAPI

文章插图
FileAPI
介绍html5 为我们提供了 File API 相关规范。主要涉及 File 接口和 FileReader 对象。
本文整理了兼容性检测、文件选择、属性读取、文件读取、进度监控、大文件分片上传以及拖拽上传等开发中常见的前端文件操作。
准备工作首先，我们的 File 来自于 <input> 标签中选中的文件列表。所以，准备如下的 HTML 代码：
<input type="file" id="files" multiple /><div id="list"></div><div id="images"></div><script src=https://www.isolves.com/it/cxkf/yy/html5/2019-07-23/"./script.js">检测兼容性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);文件属性-Fileevent.target.files 是一个 FileList 对象，它是一个由 File 对象组成的列表。
每个 File 对象，保存着选中的对应文件的属性。常用的用：

name：文件名
type：文件类型
size：文件大小

下面，通过 type 属性，过滤掉非图片类型的文件，只展示图片类型文件的信息：
function handleFileSelect(event) { const { files } = event.target; if (!files.length) { console.log("没有选择文件"); return; } const innerHTML = []; const reImage = /image.*/; for (let file of files) { if (!reImage.test(file.type)) { continue; } innerHTML.push( ` <li> <strong>${file.name}</strong> (${file.type || "n/a"}) - ${file.size} bytes </li> ` ); } document.querySelector("#list").innerHTML = `<ul>${innerHTML.join("")}</ul>`;}

文章插图
FileReader
读取文件-FileReader还是以图片读取为例，读取并且显示所有的图片类型文件。
文件读取需要使用 FileReader 对象，它常用 3 个回调方法：

onload: 文件读取完成
onloadstart：文件上传开始
onprogress : 文件上传中触发

和Image类似，在读取文件之前，需要先绑定事件处理。它读取操作有：readAsArrayBuffer、readAsDataURL、readAsBinaryString、readAsText 。传入的参数就是 File 对象。
那么这几个方法有什么区别呢？不同的读取方式，回调事件onload接受到的event.target.result不相同。比如，readAsDataURL 读取的话，result 是一个图片的 url 。
下面就是读取图片文件，然后展示的一个例子：
function handleFileSelect(event) { let { files } = event.target; if (!files.length) { return; } let vm = document.createDocumentFragment(), re = /image.*/, loaded = 0, // 完成加载的图片数量 total = 0; // 总共图片数量 // 统计image文件数量 for (let file of files) { re.test(file.type) && total++; } // onloadstart回调 const handleLoadStart = (ev, file) => console.log(`>>> Start load ${file.name}`); // onload回调 const handleOnload = (ev, file) => { console.log(`<<< End load ${file.name}`); const img = document.createElement("img"); img.height = 250; img.width = 250; img.src = https://www.isolves.com/it/cxkf/yy/html5/2019-07-23/ev.target.result; vm.AppendChild(img); // 完成加载后，将其放入dom元素中 if (++loaded === total) { document.querySelector("#images").appendChild(vm); } }; for (let file of files) { if (!re.test(file.type)) { continue; } const reader = new FileReader(); reader.onloadstart = ev => handleLoadStart(ev, file); reader.onload = ev => handleOnload(ev, file); // 读取文件对象 reader.readAsDataURL(file); }}document .querySelector("#files") .addEventListener("change", handleFileSelect, false);监控读取进度在监控读取进度的时候，主要是处理 FileReader 对象上的 onprogress 事件。
下面的例子，请打开一个较大的文件来查看效果（否则一下就读取完了）：