HTML中实现多文件上传的multiple属性与文件列表展示-html教程-PHP中文网

multiple属性仅允许多选文件，不自动展示列表；需用javascript遍历input.files渲染文件名、大小等，并用filereader预览内容；filelist只读不可删减，应维护独立数组管理已选文件。

html中实现多文件上传的multiple属性与文件列表展示

multiple 属性本身不控制文件列表展示逻辑

HTML 的 <input type="file"> 加上 multiple 只是允许用户一次选多个文件，它不会自动帮你生成文件名列表、预览或删除按钮。浏览器只在表单提交时把所有选中的文件一并发出，input.files 是一个 FileList 对象，得你自己读取、渲染、管理。

常见错误现象：加了 multiple 后页面没反应，以为“应该自动显示文件”，结果发现 DOM 里只有个空 input；或者监听了 change，但只取了 e.target.files[0]，漏掉其余文件。

务必用 e.target.files（不是 e.dataTransfer.files，除非你做了拖拽）
FileList 是只读类数组，不能用 .push() 或 .splice() 修改
IE10–11 支持 multiple，但不支持 FileList.forEach，需用 for 循环

用 JavaScript 读取并渲染文件名与大小

用户选完后，你需要遍历 input.files，提取 name 和 size，再插入到页面中。注意单位换算和可读性——直接显示字节数没人看得懂。

示例逻辑：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

const input = document.querySelector('input[type="file"][multiple]');
input.addEventListener('change', () => {
  const files = Array.from(input.files); // 转成真数组，方便 map/filter
  const listHtml = files.map(f => 
    `<div>
<code>${f.name}</code> (${(f.size / 1024).toFixed(1)} KB)</div>`
  ).join('');
  document.getElementById('file-list').innerHTML = listHtml;
});

别用 files.length === 0 判断是否清空——用户可能取消选择，此时 files 是空 FileList，但事件仍会触发
避免直接拼接 HTML 渲染大量文件（比如上百个），考虑用 document.createDocumentFragment 提升性能
f.lastModified 可读取时间戳，但格式需手动转成可读字符串（如 new Date(f.lastModified).toLocaleString()）