HTML5 原生支持多文件上传，只需 ；可配合 name="photos[]" 和 accept="image/*" 优化语义与筛选；通过 input.files 获取只读 FileList，JavaScript 遍历处理，但需注意移动端兼容性及功能扩展限制。
直接在 <input type="file"> 标签里加上 multiple 属性，就能让用户一次选中多张文件——这是 HTML5 原生支持的功能，不需要 JavaScript 就能触发系统多选对话框。
基础写法：启用多选只需一行
最简配置如下：
用户点击后，可按住 Ctrl（Windows）或 Cmd（macOS） 多选，或直接拖入多个文件（部分浏览器支持）。如果希望语义更清晰、后端接收更方便，建议补充 name 和 accept：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
name="photos[]"：便于 PHP 等后端识别为数组；其他语言也可统一按同名字段解析多个文件 -
accept="image/*"：提示浏览器只显示图片类文件（仅前端提示，不可替代服务端校验）
配合 JavaScript 获取所选文件列表
用户选择完成后，通过 input.files 可拿到一个 FileList 对象（类数组），遍历即可处理每张文件：
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input[type="file"]');input.addEventListener('change', e => {
const files = e.target.files; // FileList，包含所有选中的文件
for (let i = 0; i console.log(files[i].name, files[i].size, files[i].type);
}
});
注意几个关键限制
-
files是只读对象，不能用 JS 直接赋值或修改，只能由用户操作触发 -
multiple本身不控制总数、不负责上传，它只是“打开多选通道” - 移动端部分旧版 Android 浏览器对多选支持不稳定，建议加提示或降级处理
- 若需限制最多选 5 张、防止重复添加、实时预览等，必须用 JavaScript 补充逻辑
