jQuery删除input file多文件项时控件计数显示错误问题

数据老陈

2026-8-28

问题场景

开发带预览功能的多图上传组件时，选中多张图片自动生成带删除图标的预览项功能运行正常，异常点为：从文件数组中删除图片时，input file字段的文件计数无法正确更新。选中超过3张图片执行删除操作时，输入框显示的文件数会卡在2或3，无法随删除操作同步变化。

相关代码

文件选择框HTML

<input type="file" class="form-control" id="image" name="image[]" multiple>

原有删除逻辑

function deleteFile(index)  {
    filelistall = $('#image').prop("files");
    var fileBuffer=[];
    Array.prototype.push.apply( fileBuffer, filelistall );
    fileBuffer.splice(index, 1);
    const dT = new ClipboardEvent('').clipboardData || new DataTransfer(); 
    for (let file of fileBuffer) { dT.items.add(file); }
    filelistall = $('#image').prop("files",dT.files);
    $("#image-row-"+index).hide();
}

原有预览生成逻辑（基础功能正常）

$('#image').change(function(){
    $("#preview").html('');
    for (var i = 0; i < $(this)[0].files.length; i++) {
    var name = this.files[i].name;
    $("#preview").append('<div class="row mt-2" id="image-row-'+[i]+'">
            <div class="col-2"><img src="'+window.URL.createObjectURL(this.files[i])+'" class="img-fluid"/></div>
            <div class="col-8">&nbsp; '+ name+'</div>
            <div onclick=deleteFile('+[i]+') class="col-2 deleteFile" data-name="'+[i]+'"><i class="mdi mdi-delete mdi-24px"></i></div>
        </div>');
    }
});

问题根因

计数异常由三个问题叠加导致：

删除预览项时仅调用hide()做视觉隐藏，没有真正移除DOM节点，后续操作索引会和实际文件列表错位
删除单个文件后没有更新剩余预览项绑定的索引值，删除非末尾位置的文件时，后续预览项仍携带初始生成时的旧索引，触发删除时会错删文件，导致文件数和实际操作不匹配
部分浏览器环境下new ClipboardEvent('').clipboardData返回的DataTransfer实例存在兼容缺陷，赋值给input的files属性后，无法触发控件内部的计数刷新逻辑

修复代码

// 维护独立的可信文件数据源，不依赖从DOM节点反复读取files
let currentFiles = [];

// 监听文件选择
$('#image').change(function(){
    // 若需要每次选新文件覆盖旧列表，用下面这行
    currentFiles = Array.from(this.files);
    // 若需要支持多次选文件追加到列表，注释上一行，放开下面这行
    // currentFiles = [...currentFiles, ...Array.from(this.files)];
    renderPreview();
});

// 渲染预览列表+同步input状态
function renderPreview() {
    const previewBox = $("#preview");
    previewBox.empty();
    // 基于当前文件列表全量渲染，保证索引完全匹配
    currentFiles.forEach((file, index) => {
        const imgUrl = window.URL.createObjectURL(file);
        previewBox.append(`
            <div class="row mt-2" id="image-row-${index}">
                <div class="col-2"><img src="${imgUrl}" class="img-fluid"/></div>
                <div class="col-8">&nbsp; ${file.name}</div>
                <div onclick="deleteFile(${index})" class="col-2 deleteFile">
                    <i class="mdi mdi-delete mdi-24px"></i>
                </div>
            </div>
        `);
    });
    syncToInput();
}

// 同步文件列表到input控件
function syncToInput() {
    // 直接使用标准DataTransfer，废弃兼容性不稳定的ClipboardEvent写法
    const dT = new DataTransfer();
    currentFiles.forEach(file => dT.items.add(file));
    // 原生DOM赋值保证浏览器正确识别列表变更，刷新计数
    document.getElementById('image').files = dT.files;
}

// 删除文件逻辑
function deleteFile(index) {
    currentFiles.splice(index, 1);
    renderPreview();
}

修复要点

独立维护文件列表数据源，避免不同浏览器返回FileList引用不一致导致的操作异常
每次文件增删后全量重渲染预览列表，彻底解决索引错位问题，不需要用hide()残留无效DOM
使用标准DataTransferAPI构造文件容器，兼容所有现代浏览器
赋值files时使用原生DOM操作，保证控件正确触发状态更新，文件计数同步刷新

内容的提问来源于stack exchange，提问作者KJS