HTML元素multiple属性怎么实现多选上传-html教程-PHP中文网

multiple属性原生支持文件多选，需写为，ios safari 16.4+才完整支持；js须用array.from(input.files)转filelist为真数组操作；后端需适配同名多值接收，nginx注意client_max_body_size限制。

html元素multiple属性怎么实现多选上传

multiple 属性本身就能实现多选，但必须配合 `<input type="file">`

不是所有浏览器或场景都默认生效——关键看是否加了 multiple 这个布尔属性，且没被 JS 或 CSS 干扰。它不依赖额外 JS，原生支持。

写法必须是 <input type="file" multiple>，不能写成 multiple="true" 或 multiple="multiple"（虽然部分浏览器兼容，但规范只要求存在即可）
移动端 iOS Safari 16.4+ 才完整支持多选上传；旧版 iOS 只能单选，哪怕写了 multiple
如果用了 accept（如 accept="image/*"），多选时系统文件选择器仍会过滤类型，但不会限制数量
别给 <input> 加 display: none 后用 label 模拟点击——某些安卓 WebView 下 multiple 会失效

JS 读取多个文件要用 `files` 的类数组，不是 `value`

value 只返回第一个文件名（且不可靠），真正要操作多个文件，得访问 input.files——它是个 FileList，只读、类数组，不能用 map 等数组方法直接调用。

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

正确读取：

const input = document.querySelector('input[type="file"][multiple]');
input.addEventListener('change', () => {
  const files = Array.from(input.files); // 转成真数组才可用 map/filter
  files.forEach(file => console.log(file.name, file.size));
});

注意：FileList 没有 forEach 方法，不转数组会报错
上传时若用 FormData，应循环 append：files.forEach(f => formData.append('files', f))，而不是 formData.append('files', files)

服务端接收不到多个文件？检查字段名和后端解析逻辑

前端发的是同名字段多个值（如 files 字段传了 3 个文件），但后端框架默认可能只取第一个，或要求显式声明为数组/列表。

Node.js + Express：需用 multer 的 array('files') 或 fields([{ name: 'files', maxCount: 5 }])
Python Flask：request.files.getlist('files')，不是 request.files['files']
PHP：$_FILES['files']['name'] 是数组，需按索引遍历，不能直接当字符串用
Nginx 默认有 client_max_body_size 限制，上传多个大文件容易 413，得调大