本文介绍一种无需读取文件内容、仅依赖浏览器提供的 file 对象元数据（如 size、type、name）进行轻量级重复文件识别的方法，适用于表单中多个 `` 场景，兼顾实用性与性能。
在 Web 表单中处理多文件上传时，用户可能从不同路径选择同名文件（如 report.pdf），甚至重复选择同一物理文件。由于浏览器出于安全限制，File API 不暴露文件路径、inode、UUID 或内容哈希，也无法直接获取唯一标识符（如 SHA-256），因此无法 100% 精确判定两个 File 对象是否指向同一底层文件。
但实践中，我们可通过组合多个高区分度的只读属性进行概率性去重判断：size（字节大小）、type（MIME 类型）、name（文件名）三者联合匹配，可显著降低误判率。虽然理论上存在不同文件恰好 size/type/name 完全一致的极端情况（碰撞概率极低，尤其当 size > 0 且 type 非空时），但在多数业务场景（如文档上传、图片管理）中已足够可靠。
以下是一个完整、可运行的示例，实现跨多个 <input type="file"> 元素的文件列表合并与重复检测：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
<form name="form01">
<label>
<span>上传组 1：</span>
<input type="file" name="file1" multiple />
<output name="file1_list"></output>
</label>
<label>
<span>上传组 2：</span>
<input type="file" name="file2" multiple />
<output name="file2_list"></output>
</label>
<button type="submit">提交并检查重复</button>
</form>
<script>
document.forms.form01.addEventListener('change', e => {
const input = e.target;
if (input.type === 'file') {
const output = input.closest('label').querySelector('output');
output.value = [...input.files].map(f => f.name).join(', ') || '(无文件)';
}
});
document.forms.form01.addEventListener('submit', e => {
e.preventDefault();
// 合并所有 file inputs 的文件列表
const files = [
...document.forms.form01.file1.files,
...document.forms.form01.file2.files
];
// 去重检测：两两比较 size + type（name 可选加入，增强语义一致性）
const duplicates = [];
for (let i = 0; i < files.length; i++) {
for (let j = i + 1; j < files.length; j++) {
const a = files[i], b = files[j];
if (a.size === b.size && a.type === b.type) {
duplicates.push({ file1: a, file2: b });
}
}
}
if (duplicates.length > 0) {
console.group('⚠️ 检测到潜在重复文件（基于 size + type 匹配）');
duplicates.forEach(({ file1, file2 }, idx) => {
console.log(`[${idx + 1}] "${file1.name}" ≈ "${file2.name}"`, {
size: file1.size,
type: file1.type,
lastModified: new Date(file1.lastModified).toISOString()
});
});
console.groupEnd();
// 可选：阻止提交或提示用户确认
if (!confirm(`发现 ${duplicates.length} 组相似文件，是否继续上传？`)) return;
} else {
console.log('✅ 未发现明显重复文件');
}
// 此处可调用 FormData.append() 进行实际上传...
// const formData = new FormData();
// files.forEach(f => formData.append('files', f));
});
</script>
<style>
form { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
label { display: block; margin: 0.75em 0; }
output { font-size: 0.9em; color: #666; margin-left: 0.5em; }
</style>? 关键说明与注意事项：
- ✅ 推荐组合判断：size + type 是最实用的双因子；添加 name 可提升用户体验（例如避免 invoice.pdf 与 scan.jpg 因巧合同 size/type 被误标），但不应作为唯一依据（同名不同内容很常见）。
- ⚠️ lastModified 不可靠：用户可能手动修改时间戳，或不同设备同步导致不一致，不建议用于去重逻辑。
- ⚠️ webkitRelativePath 仅限目录上传：需设置 webkitdirectory 属性，且非标准、兼容性有限，不适用于普通文件选择。
- ? 进阶优化方向：若需更高精度，可在用户确认后对疑似重复文件使用 FileReader.readAsArrayBuffer() 计算前 N KB 的快速哈希（如 xxHash），但会带来额外内存与 CPU 开销，需权衡。
- ? 服务端兜底：前端去重仅为体验优化，服务端仍必须做最终校验（如接收后计算内容哈希并查重），确保数据一致性。
综上，该方案以零内容加载为前提，在浏览器能力边界内实现了高效、可维护的重复文件识别，是现代文件上传流程中值得采纳的务实策略。
