直接通过的files[0]获取file对象，可同步读取name、size、type、lastmodified等只读属性；需监听change事件并判空，避免未选文件时访问undefined。
直接读取 <input type="file"> 选中的文件基本信息，不需要上传到服务器，靠 File 对象本身就能拿到——大小、名称、类型、最后修改时间，全在 files[0] 上。
怎么从 <input type="file"> 拿到 File 对象
用户选择文件后，<input type="file"> 元素的 files 属性会返回一个 FileList，哪怕只选了一个文件，也要用索引访问：
const fileInput = document.querySelector('input[type="file"]');fileInput.addEventListener('change', () => { const file = fileInput.files[0]; /* 这就是 File 实例 */ });- 如果没选文件（比如清空了输入框），
files[0]是undefined，必须先判空
File 对象有哪些可用属性
File 继承自 Blob，所以它天然带以下只读属性，全部同步可读，无需异步操作：
-
file.name：原始文件名（含扩展名），如"report.pdf"；注意：不可信，可能被伪造，仅作展示 -
file.size：字节数，如2048576（约 2MB）；可用于前端大小校验（但后端仍需二次检查） -
file.type：MIME 类型，如"image/png"或空字符串（某些浏览器无法推断时） -
file.lastModified：时间戳（毫秒），如1726952640000；可用new Date(file.lastModified)转为可读日期 -
file.webkitRelativePath（非标准，仅 Chromium 系支持）：若启用webkitdirectory，可获取相对路径
为什么 file.type 有时是空字符串
浏览器根据文件扩展名或内容嗅探 MIME 类型，但不保证准确，尤其对无扩展名或类型冷门的文件：
- 用户手动改后缀（如把
.txt改成.jpg），file.type可能仍是""或错误值 - 移动端 Safari 对某些格式（如
.heic）可能不识别，返回空 - 不要单独依赖
file.type做安全校验；前端可结合accept属性 + 文件头检测（用FileReader.readAsArrayBuffer读前几个字节）增强判断
常见误操作和坑
实际写代码时这几个点最容易出错：
- 忘记监听
change事件，而监听了click或input——只有change在用户真正选完文件后才触发 - 直接读
fileInput.files[0].name却没检查files.length > 0，导致报Cannot read property 'name' of undefined - 用
form.reset()清空表单后，files属性不会自动变为空数组，而是保留原引用；需手动设fileInput.value = '' - 在移动端，部分安卓浏览器对
file.lastModified返回0，建议 fallback 到new Date()作为“当前时间”提示
真正需要读取文件内容（比如解析 CSV、预览图片）才要上 FileReader；只查基本信息，File 对象本身已经足够——快、稳、零延迟。别一上来就绕进异步读取逻辑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
