JavaScript实现：数组长度超10时移除第10项后的所有元素

核心思路 #

1. 从源头限制处理的文件数量：只对选中文件的前10个生成预览，避免多余文件进入处理流程
2. 异步回调中兜底校验：防止因异步加载顺序导致的预览数量超限，直接移除超出10个的预览图
3. 适配现有FileList逻辑：不改动原有FileList的单独处理逻辑，仅在预览生成环节做截断

修改后的代码 #

// Generate a preview <img> for each selected file
// the submitData.files array is generated from a change event listener on a file input elment

// 先截取前10个文件，避免处理多余文件
[...submitData.files].slice(0, 10).forEach(showFiles);


function showFiles(file) {
    let previewImage = new Image();
    previewImage.className = "img upload-preview-image";
    previewImage.src = URL.createObjectURL(file);

    // use decode() method that waits for individual preview images to be added when running validations
    previewImage.decode().then((response) => {
        // validations happen here for each image as part of the showFiles() function called in the forEach loop above

        // 将NodeList转为数组，方便操作
        let imgList = [...document.querySelectorAll('.upload-preview-image')];
        
        if (imgList.length > 10) {
            // 移除第10个之后的所有预览图，并释放URL资源
            imgList.slice(10).forEach(img => {
                URL.revokeObjectURL(img.src);
                img.remove();
            });
        }

        // 这里记得把previewImage添加到DOM中（原代码可能漏了这一步，假设是append到某个容器）
        // document.getElementById('preview-container').appendChild(previewImage);

    }).catch((encodingError) => {
        // 处理解码错误，同时释放URL资源
        URL.revokeObjectURL(previewImage.src);
        console.error('图片解码失败:', encodingError);
    });
}

关键细节说明 #

• 源头截断：用slice(0,10)直接限制处理的文件数量，从根本上减少多余的预览生成操作
• 异步兜底：因为decode()是异步操作，可能出现后选的文件先完成解码的情况，所以在回调中再次校验并移除超出部分
• 内存泄漏预防：移除预览图时调用URL.revokeObjectURL()释放临时URL，避免浏览器内存占用过高
• 适配原有逻辑：不修改FileList的处理逻辑，仅在预览生成环节做限制，不会影响你已有的文件上传数据处理流程

如果需要支持多次选择文件（累加不超过10个），可以在文件选择时先计算当前已有的预览数量，再截取剩余可添加的文件数量：

// 多次选择文件时的处理逻辑
const existingPreviewCount = document.querySelectorAll('.upload-preview-image').length;
const availableSlots = Math.max(0, 10 - existingPreviewCount);
[...submitData.files].slice(0, availableSlots).forEach(showFiles);

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