持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情
之前我们聊过关于 Blob 的概念与用法，这篇准备聊聊基于Blob衍生的 File，废话不多说，开搞！
什么是File对象
File对象提供有关文件的信息，并允许js访问其内容。实际上，File对象是特殊类型的Blob，Blob的属性和方法都可以用于File对象，但需要注意的是File对象只存在于浏览器环境中，在Node.js环境中不存在
File对象主要有如下属性
lastModified：文件最后修改日期，为自1970年1月1日00:00以来的毫秒数lastModifiedDate：文件的最后修改日期name：文件名size：文件大小type：文件的类型（MIME）
如何获取File对象
大体上讲，主要存在两种获取方式
<input>元素上选择文件后返回的 FileList 对象- 文件拖放操作生成的
DataTransfer对象
下面依次看看它们的用法
input元素
首先定义一个类型为 file 的input标签：<input type="file" id="fileInput" multiple="multiple">
给 input 标签添加 onchange 事件：
const fileInput = document.getElementById("fileInput");
fileInput.onchange = (e) => {
console.log(e.target.files);
}
通过files就可以拿到File对象
文件拖放
将浏览器之外的文件拖到浏览器窗口中，并将它放在一个成为拖放区域的特殊区域中。拖放区域用于响应放置操作并从放置的文件中提取信息，这些是通过 ondrop 和 ondragover 两个事件实现的
给一个示例，首先定义一个拖放区域：
<div id="dropZone"></div>
然后给这个元素添加 ondragover 和 ondrop 事件处理程序：
const dropZone = document.getElementById("dropZone");
dropZone.ondragover = (e) => {
e.preventDefault();
}
dropZone.ondrop = (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
console.log(files)
}
File对象就保存在 e.dataTransfer.files 里面，它与通过input获取的File对象完全一致
可以看到这里给两个监听回调都添加了 e.preventDefault()，用来阻止默认事件，它是非常重要的，可以用来阻止浏览器的默认行为，比如阻止放置的文件显示在浏览器窗口中
