HTML表单元素多文件选择功能实现-html教程-PHP中文网

html原生启用多文件选择只需在中添加multiple布尔属性，浏览器支持良好，但需注意ios旧版本及部分webview限制、filelist需转数组遍历、formdata同名append才能批量提交。

html表单元素多文件选择功能实现

HTML原生如何启用多文件选择

直接在 <input> 标签中添加 multiple 属性即可，不需要 JavaScript 也能触发系统级多选界面。浏览器支持度极好（Chrome 14+、Firefox 3.6+、Safari 6+、Edge 全版本），但注意：它只是「允许用户一次选多个」，不等于自动上传或处理文件列表。

常见错误是只写 <input type="file"> 却漏掉 multiple，结果点击后只能选一个文件，连 Ctrl/Cmd 多选都无效。

multiple 是布尔属性，写成 multiple="multiple" 或仅 multiple 都可以
搭配 accept 可限制类型，比如 accept="image/*,.pdf"，但不能完全阻止用户绕过（仅前端提示）
若同时设了 capture（如拍照），部分安卓浏览器会禁用 multiple —— 这是已知兼容性坑，需测试真机

JavaScript读取多文件的正确方式

input.files 返回的是 FileList 对象，不是数组，不能直接用 map 或 forEach。必须先转成数组，或用传统 for 循环遍历。

典型错误写法：input.files.forEach(...) —— 会报 TypeError: input.files.forEach is not a function。

安全转换方式：Array.from(input.files) 或 [...input.files]
每个 File 对象有 name、size、type、lastModified 等属性，可直接读取，无需 FileReader
如果要预览图片，对每个 File 调用 URL.createObjectURL(file)，记得上传成功后调用 URL.revokeObjectURL() 避免内存泄漏

FormData上传多文件时的字段名处理

用 FormData.append() 添加多个文件时，**字段名必须一致**，后端才能收到数组形式的数据（如 PHP 的 $_FILES['files']['name'] 是数组）。如果给每个文件用不同 key，后端只能拿到最后一个。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

错误示例：formData.append('file1', files[0]); formData.append('file2', files[1]); —— 后端收不到批量文件。

正确做法：files.forEach(file => formData.append('files', file));
注意：append('files', file) 中第一个参数是字段名，第二个是单个 File 对象；重复调用同名 append 就是标准的多文件提交格式
如果后端框架要求带索引（如 files[0]），那是框架特定约定，原生 HTML 表单不支持，需手动拼接或改用 JSON + fetch