如何在jQuery中实现文件拖放时显示加载器？

我来帮你捋捋这个问题哈～你的加载器为啥没生效？核心原因是UI线程被阻塞了：当drop事件触发后，你刚调用EnableLoader()，紧接着就执行了upload()——这个函数处理500+文件时会占用大量UI线程资源，浏览器根本没时间完成加载器的DOM渲染，直接就进入卡顿状态了。

具体解决步骤： #

1. 先给加载器留足渲染时间：把upload()的执行放到setTimeout里（哪怕延迟0毫秒），这样能把文件处理逻辑推到下一个事件循环，让浏览器先把加载器显示出来。
2. 优化文件处理逻辑：一次性处理500+文件必然会卡，建议把文件分成小批次处理，每处理完一批再继续下一批，同时保持加载器显示直到所有任务完成。

修改后的代码示例： #

$("#div").on("drop", function (e) {
    // 先触发加载器显示
    EnableLoader();

    if (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
        e.preventDefault();
        e.stopPropagation();
        
        // 用setTimeout把上传逻辑延后，给浏览器渲染加载器的时间
        setTimeout(() => {
            const fileList = Array.from(e.originalEvent.dataTransfer.files);
            // 分批次处理，比如每50个文件为一批
            processFilesInBatches(fileList, 50);
        }, 0);
    }
});

// 分批处理文件的辅助函数
function processFilesInBatches(files, batchSize) {
    if (files.length === 0) {
        // 所有文件处理完成，隐藏加载器
        DisableLoader();
        return;
    }
    // 取出当前批次的文件
    const currentBatch = files.splice(0, batchSize);
    // 处理当前批次
    upload(currentBatch);
    // 递归处理下一批，加个小延迟避免过度占用线程
    setTimeout(() => processFilesInBatches(files, batchSize), 100);
}

额外小建议： #

• 可以在加载器上添加进度提示（比如“已处理320/560个文件”），让用户更直观地知道当前状态；
• 检查EnableLoader()的实现，确保它是直接修改DOM（比如添加显示类、修改display属性），没有额外的异步延迟逻辑。

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