在HTML5中，通过监听<input type="file" multiple>的change事件并访问e.target.files.length可准确统计选中文件数；需避免使用value属性或尝试修改只读的files对象。
在HTML5中，<input type="file"> 元素通过设置 multiple 属性，允许用户一次性选择多个文件。要统计用户选中的文件总数，关键在于监听文件输入变化，并访问其 files 属性——它是一个 FileList 对象，具有 .length 属性。
1. 基础HTML结构与multiple属性启用
确保 input 标签包含 multiple 属性（布尔属性，无需赋值），并建议加上 id 或 class 便于JS获取：
<div>已选中：0 个文件</div>
2. 使用change事件监听并读取files.length
change 事件最可靠（比 input 更稳定），触发时检查 e.target.files：
说明：即使用户取消选择或未选中任何文件，files 仍存在，只是长度为 0；无需额外判断是否为空对象。
立即学习“前端免费学习笔记（深入）”；
- 获取元素：
const input = document.getElementById('fileInput'); - 绑定事件：
input.addEventListener('change', e => { const count = e.target.files.length; ... }); - 更新显示：
document.getElementById('countDisplay').textContent = count;
3. 注意事项与常见问题
避免误用 .files 的常见陷阱：
-
不能用
value获取数量：input 的value只返回第一个文件名（或空字符串），与多选无关 -
不支持直接修改
files：它是只读的 FileList，无法通过 JS 向其中添加或删除文件 -
兼容性良好：Chrome 20+、Firefox 3.6+、Edge、Safari 6.1+ 均支持
multiple和files -
可配合
accept限制类型：如accept="image/*,.pdf"，但不影响计数逻辑
4. 完整可运行示例（含清空重置）
加入一个“清空”按钮，方便测试多次选择：
<input type="file" id="fileInput" multiple /><button id="clearBtn">清空选择</button>
<p>当前选中：0 个文件</p>
对应JS：
const fileInput = document.getElementById('fileInput');const countEl = document.getElementById('count');
const clearBtn = document.getElementById('clearBtn');
fileInput.addEventListener('change', () => {
countEl.textContent = fileInput.files.length;
});
clearBtn.addEventListener('click', () => {
fileInput.value = ''; // 重置input值，触发change并清空files
countEl.textContent = '0';
});
