聊聊js中的File～

之前我们聊过关于 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()，用来阻止默认事件，它是非常重要的，可以用来阻止浏览器的默认行为，比如阻止放置的文件显示在浏览器窗口中