如何实现HTML多文件上传功能-html教程-PHP中文网

加了 multiple 属性仍只能选一个文件，根本原因是前端表单缺失 enctype="multipart/form-data"、javascript 误将 filelist 当数组操作、后端未启用多值解析（如 express 需 upload.array()）。

如何实现html多文件上传功能

加了 multiple 属性却还是只能选一个文件？不是浏览器问题，是 HTML 写法或后端解析没对上——核心就三件事：前端表单必须带 multiple 和 enctype="multipart/form-data"，JavaScript 读取时别把 input.files 当数组用，后端必须按多值逻辑收。

为什么加了 multiple 还是单文件选择

这是最常被忽略的硬性前提：multiple 必须和 type="file" 同时存在，且不能只靠 JS 补救。系统级限制一旦没触发，用户 Ctrl/Cmd 多选、拖拽、框选全无效。

<input type="file" multiple> 是最低要求；漏掉 multiple，哪怕 JS 绑定再多事件也没用
表单 <form></form> 必须设 enctype="multipart/form-data"，否则文件字段根本不会发出去——Network 面板里看不到任何 file 字段就是这个原因
移动端尤其注意 iOS：16.4 以下 Safari 会静默忽略 multiple，不报错也不生效，检测 UA + 提示升级是唯一办法

JavaScript 怎么安全读取多个文件

input.files 是 FileList，不是数组，直接调 .forEach() 或 .map() 会报 "not a function"。它支持 .length 和索引访问，但没有原生迭代方法。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

转成真数组：用 Array.from(input.files) 或展开语法 [...input.files]
遍历时别只取 files[0]——那是单文件写法，多文件必须循环 for (let i = 0; i
每个 file 是 File 实例，有 name、size、type、lastModified，可立刻做校验（比如 if (file.size > 5 * 1024 * 1024)）
预览图片时，每个 file 要单独 new FileReader()，且用完 URL.createObjectURL(file) 后必须调 URL.revokeObjectURL(url)，否则内存泄漏

FormData 里 key 名怎么写才让后端收到全部文件

关键在「同名多次 append」，不是拼接或嵌套。后端能否拿到全部，取决于你传过去的 key 是否被识别为数组型字段。

✅ 正确：formData.append('files', file1); formData.append('files', file2); —— 多个同名 key，后端启用多值解析就能收全
❌ 错误：formData.append('files[]', file1); 或 formData.append('files', [file1, file2]); —— 前者 PHP 可能兼容，但 Express multer 默认不认；后者直接传数组对象，后端收不到二进制流
别手动设置 Content-Type 请求头，让浏览器自动生成 multipart/form-data; boundary=...，设了反而 400
调试必看 Network → Payload：每个文件应作为独立条目出现，而不是合并成一个 blob 或只有一项

后端为什么只收到第一个文件

前端大概率传全了，问题出在后端解析层。multipart 数据结构本身支持多文件，但框架默认往往按单值处理。

Express + multer：upload.array('files') 是必须的，upload.single() 或 req.file 只取第一个；req.files['files'] 才是数组（注意是 files，不是 file）
PHP：$_FILES['files'] 是二维数组，name、tmp_name、size 各自是平行数组，得用 for ($i = 0; $i 遍历，不能只取 <code>$_FILES['files']['name'][0]
如果表单里还有其他字段（如 <input name="title">），它们会随文件一起在 multipart 中提交，但前提是后端中间件已启用 multipart 解析（如 Express 的 multer，不是 body-parser）