<input type="file">需配合<form enctype="multipart/form-data">及name属性才能上传；JS需用files[0]获取File对象，传文件须用FormData，后端须正确解析并校验。
input type="file" 基本写法和必设属性
只写 <input type="file"> 是无法真正上传文件的——它只是触发选择，不自动提交。必须配合 <form> 和正确的 method、enctype 才能发到服务端。
常见错误是漏掉 enctype="multipart/form-data"，导致后端收不到文件字段，只收到空值或报错 400 Bad Request 或 Missing boundary。
正确最小结构：
<form action="/upload" method="POST" enctype="multipart/form-data"> <input type="file" name="myfile"> <button type="submit">上传</button> </form>
-
name属性必须设置，后端靠它识别文件字段名（如myfile） - 单文件上传默认只选一个；加
multiple可多选：<input type="file" name="files" multiple> - 限制类型可用
accept，例如accept=".pdf,.docx"（注意：仅前端提示，不可靠，后端必须校验）
JavaScript 获取选中的文件对象
用户点击“选择文件”后，<input type="file"> 的 files 属性才会有内容。它是个 FileList，不是数组，但可用 [0] 取第一个。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见错误是直接读 value——那只是文件名路径（浏览器出于安全不暴露真实路径），不是文件内容。
- 用
input.files[0]拿到File对象，含name、size、type等元信息 - 想读文件内容需用
FileReader，比如readAsDataURL()转 base64，或readAsArrayBuffer()用于二进制处理 - 监听变化要用
input.addEventListener('change', ...)，而不是click——因为点击不等于已选中
用 fetch 实现无刷新上传（绕过 form 提交）
现代前端大多不用传统 form 提交，而是用 fetch + FormData 控制上传过程、加进度条、处理错误。
关键点：不能把 File 对象 JSON.stringify，也不能直接放 body 里——必须用 FormData 包一层。
const input = document.querySelector('input[type="file"]');
const file = input.files[0];
if (!file) return;
const formData = new FormData();
formData.append('myfile', file); // 字段名要和后端约定一致
fetch('/upload', {
method: 'POST',
body: formData // 不设 headers，浏览器会自动加正确的 Content-Type 和 boundary
}).then(r => r.json());
-
FormData会自动生成Content-Type: multipart/form-data; boundary=...，手动设 headers 反而会破坏它 - 如果后端要求带 token，可加在
headers里，但不要碰Content-Type - 大文件上传建议加
onprogress事件（通过XMLHttpRequest.upload，fetch原生不支持进度，需用ReadableStream或降级）
后端接收时容易忽略的细节
前端传得再对，后端解析错也会失败。Node.js（Express）、Python（Flask）、PHP 等框架对 multipart/form-data 处理逻辑差异很大。
- Express 默认不解析文件，需用
multer中间件，且single('myfile')中的字段名必须和前端formData.append()的 key 一致 - Flask 用
request.files.get('myfile')，不是request.form；且若用 gunicorn/uWSGI，需确认是否禁用了文件上传（如client_max_body_size） - PHP 的
$_FILES是关联数组，$_FILES['myfile']['tmp_name']才是临时路径，必须用move_uploaded_file()移出，否则请求结束就被删 - 所有后端都必须校验
size和type——accept在前端可被绕过，Content-Type也可伪造
上传路径、临时目录权限、超时时间、分块续传支持……这些都不是前端能控制的。哪怕 input 写得完全正确，卡在后端配置上也很常见。
