最简纯前端文件选择控件为，支持accept、multiple、required等属性，id必需以便js获取；默认样式不可深度定制，::file-selector-button仅chrome98+较好支持。
直接用 <input type="file"> 就能实现基础文件上传界面，不需要 JS 也能提交，但真正可用的上传必须配合后端接收——前端只是选文件+发请求。
怎么写最简 HTML 文件选择控件
纯前端展示和选择，不发请求：
<input type="file" id="fileInput">
常见可加的实用属性：
-
accept=".pdf,.docx"：限制文件类型（仅提示，可被绕过） -
multiple：允许一次选多个文件 -
required：表单提交时校验是否已选（需在<form></form>内） -
id必须有，否则 JS 拿不到元素
注意：type="file" 默认样式丑且不可用 CSS 深度定制（::file-selector-button 是新标准，Chrome 98+ 支持，但 Safari 仍弱）。
怎么用表单直接提交到后端（无 JS）
如果后端有个接收上传的接口（比如 Python Flask 的 /upload），可以直接用表单：
关键点：
-
enctype="multipart/form-data"缺失会导致后端收不到文件（只收到文件名） -
name="file"的值会作为后端获取文件的字段名（如 Flask 用request.files['file']） - 浏览器会跳转或刷新页面，不适合 SPA 场景
怎么用 JavaScript 发送上传请求（推荐）
更可控、可加进度条、支持拖拽、不跳页：
const input = document.getElementById('fileInput');<br>input.addEventListener('change', async () => {<br> const file = input.files[0];<br> if (!file) return;<br><br> const formData = new FormData();<br> formData.append('file', file); // 字段名要和后端约定一致<br><br> try {<br> await fetch('/api/upload', {<br> method: 'POST',<br> body: formData,<br> // 不要设 Content-Type，让浏览器自动设 multipart boundary<br> });<br> } catch (err) {<br> console.error('上传失败:', err);<br> }<br>});
容易踩的坑：
- 手动设置
headers: {'Content-Type': 'multipart/form-data'}会破坏 boundary，导致后端解析失败 -
input.files是FileList，不是数组，取文件用input.files[0]或遍历 - 大文件上传建议加
AbortController支持取消，否则用户关掉标签页请求还在后台跑
为什么上传后端总收不到文件？常见排查点
前端看着发了，后端 request.files 却为空，大概率是以下之一：
- 漏了
enctype="multipart/form-data"（表单方式） - JS 中
FormData.append()字段名和后端期待的不一致（比如后端要document，你传了file） - 后端框架有默认文件大小限制（如 Express 默认 100kb，需配
express.json({limit: '5mb'})和express.urlencoded({limit: '5mb'})，但文件上传还要额外配 multer 限制） - Nginx/Apache 反向代理拦截了大请求，报 413 Request Entity Too Large
调试时先用 curl 模拟请求确认后端是否真能收，再查前端构造逻辑——别一上来就怀疑跨域或权限问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
