本文介绍一种基于 JavaScript Map 管理选中文件状态的可靠方案：通过独立维护待上传文件列表，实现点击删除按钮后不仅移除预览缩略图，更确保该图片完全不参与表单提交，彻底解决 input[type="file"] 无法局部清空文件的原生限制。
本文介绍一种基于 javascript map 管理选中文件状态的可靠方案：通过独立维护待上传文件列表，实现点击删除按钮后不仅移除预览缩略图，更确保该图片**完全不参与表单提交**，彻底解决 `input[type="file"]` 无法局部清空文件的原生限制。
在传统多图上传场景中，开发者常误以为仅从 DOM 中移除 <img> 预览元素即可阻止对应文件提交——但事实是：<input type="file" multiple> 的 files 集合一旦触发 change 事件即被锁定，后续 DOM 操作对其零影响。提交时浏览器仍会将原始全部文件（包括已被“删除”的）一并打包发送，导致数据库存入冗余或无效图像。
要真正实现「所见即所传」，关键在于解耦文件选择与表单提交逻辑：不再依赖 <input> 的 files 属性直接提交，而是用 JavaScript 主动收集、筛选并构造 FormData。
✅ 核心思路：用 Map 管理生命周期可控的文件引用
我们使用 Map 对象（键为唯一 ID，值为含 src、name、type 等元信息的文件对象）作为「待上传文件清单」。所有操作围绕该清单展开：
- 添加：文件选择后，逐个读取为 Data URL，生成唯一 ID（如 id${lastModified}${size}），存入 Map；
- 删除：点击按钮时，仅从 Map 中 delete(key)，再刷新预览；
- 提交：拦截表单 submit 事件，遍历 Map 中剩余文件，用 dataURItoBlob() 转为 Blob，再 append() 到 FormData。
? 完整可运行代码示例
<form name="form01" action="" method="post" enctype="multipart/form-data">
<label for="titulo">Título:</label>
<input type="text" id="titulo" name="titulo" required><br><br>
<label for="descricao">Descrição:</label><br>
<textarea id="descricao" name="descricao" required></textarea><br><br>
<div id="preview"></div>
<label>Imagens:
<button type="button" name="browse">Browse…</button>
<input type="file" name="images" multiple accept="image/*" style="display:none">
</label>
<small>(Você pode selecionar várias imagens segurando a tecla Ctrl)</small><br><br>
<input type="submit" value="Cadastrar Anúncio">
</form>
<script>
const images = new Map(); // 存储待上传文件（ID → {src, name, type, ...}）
const preview = document.getElementById('preview');
// 【提交拦截】构造纯净 FormData
document.forms.form01.addEventListener('submit', e => {
e.preventDefault();
const formData = new FormData(e.target);
// 清除原始 input.files（避免重复提交）
formData.delete('images');
// 仅添加 Map 中现存文件
images.forEach(file => {
const blob = dataURItoBlob(file.src);
formData.append('imagens[]', blob, file.name);
});
// 发送请求（此处以 fetch 为例，可替换为 XMLHttpRequest 或其他）
fetch('post.php', {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => console.log('Upload success:', data))
.catch(err => console.error('Upload failed:', err));
});
// 【文件选择】监听隐藏 input 的 input 事件（比 onchange 更可靠）
document.forms.form01.images.addEventListener('input', e => {
const input = e.target;
[...input.files].forEach(file => {
const reader = new FileReader();
reader.fileinfo = {
name: file.name,
lastModified: file.lastModified,
size: file.size,
type: file.type
};
reader.onload = e => {
const fileObj = { ...reader.fileinfo, src: e.target.result };
const id = `id${file.lastModified}${file.size}`;
images.set(id, fileObj);
previewImages();
};
reader.readAsDataURL(file);
});
input.value = ''; // 重置 input，支持重复选择相同文件
});
// 【删除/浏览】统一委托至表单
document.forms.form01.addEventListener('click', e => {
switch (e.target.name) {
case 'delete':
images.delete(e.target.value);
previewImages();
break;
case 'browse':
e.target.form.images.click();
break;
}
});
// 【预览渲染】双向同步：存在 Map → 渲染；DOM 存在但 Map 无 → 移除
function previewImages() {
// 渲染新文件
images.forEach((file, id) => {
if (!preview.querySelector(`#${id}`)) {
const container = Object.assign(document.createElement('div'), {
className: 'image-container',
id
});
const img = Object.assign(document.createElement('img'), {
src: file.src,
style: 'max-width: 100px;'
});
container.appendChild(img);
const btn = Object.assign(document.createElement('button'), {
textContent: 'Deletar',
name: 'delete',
type: 'button',
value: id
});
container.appendChild(btn);
preview.appendChild(container);
}
});
// 清理已删除文件的残留 DOM
preview.querySelectorAll('.image-container').forEach(el => {
if (!images.has(el.id)) el.remove();
});
}
// 【工具函数】Data URL → Blob（必需！否则 FormData 无法正确识别文件类型）
function dataURItoBlob(dataURI) {
const parts = dataURI.split(',');
const mime = parts[0].match(/:(.*?);/)[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: mime });
}
</script>⚠️ 关键注意事项
- 不要使用 input.value = "" 清除单个文件：它会清空整个 files 列表，违背“局部删除”需求；
- 必须转换 Data URL 为 Blob：直接 append(dataURL, ...) 会导致后端收到的是文本而非二进制流，dataURItoBlob() 是必备桥梁；
- ID 唯一性保障：示例中使用 lastModified + size 组合，实践中建议增加时间戳或 crypto.randomUUID() 提升鲁棒性；
- 兼容性提示：Map、FormData.append()、atob() 均兼容现代浏览器（Chrome 38+ / Firefox 29+ / Edge 12+），IE 需 Polyfill；
- 服务端配合：PHP 接收时需处理 $_FILES['imagens']['tmp_name'] 数组，而非旧逻辑中的 $_FILES['imagens'] 单文件。
此方案将文件控制权完全交还前端，逻辑清晰、扩展性强（如后续加入排序、裁剪、压缩等均不影响核心流程），是多图上传中动态管理文件生命周期的推荐实践。
