html5 仅负责文件选择，非完整上传方案；需设 name 属性、可用 multiple 和 accept 限定类型，通过 change 事件获取只读 filelist，上传须配合表单提交或 formdata + fetch。
HTML5 中的 <input type="file"> 本身只负责选择，不上传 —— 它是文件上传流程的第一步，不是完整方案。
基础写法与关键属性
最简结构必须包含 name 属性，否则后端收不到字段：
-
<input type="file" name="avatar">—— 单选，提交时以avatar为键名 -
<input type="file" name="docs" multiple>—— 多选，files返回 FileList -
accept="image/jpeg,image/png,.pdf"—— 建议写具体 MIME 或扩展名，避免用image/*（Safari 和部分安卓浏览器支持弱） - 默认按钮区域小，推荐用
<label for="xxx"></label>包裹文字或图标，再把 input 设为display: none来提升点击体验
选完之后怎么拿到文件
监听 change 事件，从 e.target.files 获取 File 对象：
-
files[0]是第一个文件（单选场景） -
files.length > 0必须判断，防止用户取消选择后返回空列表 - 每个
File对象自带name、size（字节）、type（MIME，可能为空）等属性，可直接用于校验或展示
常见误区和限制
- 不能通过 JS 给
input.value赋值来“预设”文件 —— 浏览器出于安全禁止该操作 -
accept只影响文件选择对话框的过滤界面，不阻止用户绕过；真实类型校验必须由后端完成 - 移动端行为不一致：Android Chrome 常按扩展名过滤，iOS Safari 更依赖 MIME，别只靠前端限制
- 选中文件后，
files是只读的 FileList，无法增删改，只能读取和上传
下一步做什么
拿到 File 对象后，实际上传需配合其他机制：
- 传统方式：放在
<form enctype="multipart/form-data"></form>里，用 submit 提交 - 现代方式：用
FormData.append('key', file)构建数据体，再用fetch或XMLHttpRequest发送 - 如需预览图片或读取文本内容，可用
FileReader异步加载，监听load事件获取结果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
