HTML5 中多文件上传怎么设置 multiple 属性一次选择多张-H5教程-PHP中文网

HTML5 原生支持多文件上传，只需；可配合 name="photos[]" 和 accept="image/*" 优化语义与筛选；通过 input.files 获取只读 FileList，JavaScript 遍历处理，但需注意移动端兼容性及功能扩展限制。

html5 中多文件上传怎么设置 multiple 属性一次选择多张

直接在标签里加上 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);
  }
});