拖拽超100个文件时event.dataTransfer.items仅返回100个的解决方法咨询

嘿，这个问题我之前也踩过坑！主要是部分浏览器（比如Chrome）为了避免大量文件拖拽导致性能过载，会给event.dataTransfer.items设置100条的默认返回限制。不过别担心，有几个实用的方法可以解决这个问题：

方法一：改用event.dataTransfer.files获取完整文件列表 #

dataTransfer.files是直接映射拖拽的所有文件集合，大部分情况下不会有数量限制，修改你的drop事件代码试试：

const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('drop', async (event) => {
  event.preventDefault();
  dropZone.classList.remove('dragover');

  // 替换成files属性获取完整文件列表
  const files = event.dataTransfer.files;
  console.log(`成功获取到 ${files.length} 个文件`);
  
  // 遍历处理所有文件
  Array.from(files).forEach((file, index) => {
    console.log(`第${index+1}个文件：${file.name}`);
  });
})

方法二：通过文件条目（Entry）提取文件（针对特殊受限场景） #

如果第一种方法还是有问题，可以尝试通过dataTransfer.items获取文件条目，再逐个提取文件。这个方法稍显繁琐，但在部分特殊场景下有效：

dropZone.addEventListener('drop', async (event) => {
  event.preventDefault();
  dropZone.classList.remove('dragover');

  const items = event.dataTransfer.items;
  const allFiles = [];
  let processedCount = 0;

  for (const item of items) {
    // Chrome/Edge用webkitGetAsEntry，Firefox用getAsEntry
    const entry = item.webkitGetAsEntry() || item.getAsEntry();
    if (entry?.isFile) {
      entry.file(file => {
        allFiles.push(file);
        processedCount++;
        // 等所有条目处理完成后再执行后续逻辑
        if (processedCount === items.length) {
          console.log(`最终获取到 ${allFiles.length} 个文件`);
          // 这里添加你的文件处理逻辑
        }
      });
    }
  }
})

额外注意事项 #

因为你的代码是在Streamlit的iframe中运行，还要确认两个点：

• iframe的源和主页面是否同域？跨域可能会触发额外的权限限制，影响文件获取
• 可以尝试在浏览器无痕模式下测试，排除浏览器隐私/安全设置的干扰

优先试试第一种方法，应该能解决绝大多数情况！

备注：内容来源于stack exchange，提问作者Vladimir