引言
在现代Web开发中，用户与文件的交互变得越来越频繁。从简单的文件上传到复杂的文件预览和编辑，前端技术不断进步，为用户提供了更加丰富和便捷的体验。HTML5引入的File API是这一进步的关键。本文将深入探讨File API的各个方面，包括File、FileList和FileReader对象，并通过实例展示如何在前端实现文件的读取和操作。
File API介绍
File API是HTML5的一部分，它允许Web应用程序读取用户设备上的文件，而无需使用传统的上传表单。这使得开发者能够在客户端对文件进行验证、预览和处理，极大地提高了用户体验。
File对象
File对象代表一个文件，它继承自Blob对象。用户通过<input type="file">选择文件后，浏览器会创建一个FileList对象，其中包含一个或多个File实例。
构造函数
new File(array, name [, options])
array：文件内容的数组，可以是二进制对象或字符串。name：文件名或路径。options：可选配置对象，包括type（MIME类型）和lastModified（最后修改时间戳）。
实例属性和方法
lastModified：文件最后修改时间。name：文件名。size：文件大小（字节）。type：MIME类型。
FileList对象
FileList是一个类似数组的对象，包含一组选中的File对象。它主要出现在文件控件的files属性和拖放操作的目标区域。
实例属性
length：文件数量。
实例方法
item(index)：返回指定位置的File对象。
FileReader对象
FileReader用于异步读取文件内容，支持多种读取方式，如文本、二进制、Data URL等。
实例属性
error：读取过程中产生的错误对象。readyState：当前状态（0-未加载，1-加载中，2-加载完成）。result：读取完成后的内容。
实例方法
abort()：终止读取。readAsArrayBuffer()：读取为ArrayBuffer。readAsBinaryString()：读取为二进制字符串。readAsDataURL()：读取为Data URL。readAsText()：读取为文本。
综合实例
下面是一个使用File API实现文件预览的示例。
HTML
<label>
<input type="file" name="file" id="file">
<div class="uploadImg">
<div class="cross"></div>
</div>
</label>
CSS
.uploadImg {
width: 150px;
height: 150px;
border: 1px dashed skyblue;
border-radius: 30px;
position: relative;
cursor: pointer;
}
.cross {
width: 30px;
height: 30px;
position: absolute;
left: calc(50% - 15px);
top: calc(50% - 15px);
}
.cross::before {
content: "";
width: 30px;
height: 2px;
background-color: skyblue;
position: absolute;
top: calc(50% - 1px);
}
.cross::after {
content: "";
width: 30px;
height: 2px;
background-color: skyblue;
position: absolute;
left: calc(50% - 15px);
top: calc(50% - 1px);
transform: rotate(90deg);
}
input[type="file"] {
display: none;
}
JS
var file = document.querySelector("#file");
var div = document.querySelector(".uploadImg");
var cross = document.querySelector(".cross");
file.onchange = function () {
var reader = new FileReader();
var content = file.files[0];
if (content) {
reader.readAsDataURL(content);
reader.onload = function () {
div.style.background = `url(${reader.result}) center/cover no-repeat`;
cross.style.opacity = 0;
}
}
}
结语
File API为前端文件操作提供了强大的支持，使得Web应用能够更加灵活地处理文件。随着Web技术的发展，我们可以期待更多类似File System Access API这样的创新，进一步扩展Web应用的能力。
