HTML中用可创建原生文件上传控件，需设name属性供后端识别，加multiple支持多选，accept限制类型（仅前端提示），常配合label隐藏原生控件并自定义样式，通过change事件读取File对象，用FileReader预览，上传则需FormData+fetch或表单提交。
HTML里怎么写一个基础的文件上传按钮
直接用 <input type="file"> 就能生成原生上传控件，不需要额外 JS 就能选文件。但注意它默认是“选择文件”按钮，不是“上传到服务器”——选完后还得靠表单提交或 JS 触发上传。
常见写法：
<input type="file" id="upload" name="file">
-
name属性必须有，后端靠它识别文件字段名 - 加
multiple可多选：<input type="file" multiple> - 限制类型用
accept，比如只允许图片：accept="image/*"（注意：只是前端提示，不阻止恶意绕过） - 别漏掉
id，方便后续用 JS 获取文件对象
点击文字按钮触发 file input（隐藏原生控件）
原生 <input type="file"> 样式难改，常见做法是把它隐藏，再用自定义按钮点击时调用它的 click() 方法。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 把
input设为display: none或opacity: 0+ 绝对定位盖住 - 用
label的for属性关联 input，比 JS 更简洁可靠 - 不要用
document.getElementById(...).click()在某些 iOS 版本上会失效
推荐写法：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<label for="file-input" class="upload-btn">选择文件</label><br><input type="file" id="file-input" name="file" style="display: none;">
用 JavaScript 读取选中的文件内容（比如预览图片）
用户点了文件后，得用 JS 拿到 File 对象才能处理。核心是监听 change 事件，从 event.target.files 里取值。
注意：
-
files是FileList，不是数组，要用[0]或Array.from()转换 - 读取本地文件内容（如图片预览）用
FileReader，别直接读file.path（浏览器禁止访问真实路径） - 大文件别一次性
readAsDataURL，容易卡顿或内存溢出；考虑readAsArrayBuffer分片上传
简易预览示例：
const input = document.getElementById('file-input');<br>input.addEventListener('change', (e) => {<br> const file = e.target.files[0];<br> if (file && file.type.startsWith('image/')) {<br> const reader = new FileReader();<br> reader.onload = () => {<br> document.getElementById('preview').src = reader.result;<br> };<br> reader.readAsDataURL(file);<br> }<br>});
真正上传到服务器需要后端配合
前端选完文件只是第一步，上传动作必须由 JS 发起（如 fetch）或表单提交。纯 HTML 表单也能传，但体验差、无法监听进度、不能控制请求头。
典型 fetch 上传写法：
const formData = new FormData();<br>formData.append('file', input.files[0]); // 字段名要和后端约定一致<br>fetch('/upload', {<br> method: 'POST',<br> body: formData // 不要设 Content-Type，让浏览器自动设 boundary<br>})
- 后端接口必须支持
multipart/form-data解析（如 Express 用multer，Python Flask 用request.files） - 如果后端要求 token 或其他 header，
FormData不能直接加，得用fetch的headers选项（但注意：设了Content-Type会导致 boundary 失效） - 上传大文件记得加
onprogress监听（需用XMLHttpRequest，fetch原生不支持）
最常被忽略的是前后端字段名不一致、没处理空文件、没校验文件大小——这些都会导致上传无声失败。
