Drag and Drop 文件导入与批量处理实践

概述拖拽导入是常见的文件入口。本文给出事件接入、MIME 过滤与批量处理示例，并说明与 IndexedDB/OPFS 的协作。能力与接入function bindDropArea(el, onFiles) { el.addEventListener('dragover', e => { e.preventDefault(); }); el.addEventListener('drop', async e => { e.preventDefault(); const files = []; for (const item of e.dataTransfer.items) { if (item.kind === 'file') files.push(item.getAsFile()); } onFiles(files); }); } MIME 过滤与批量处理async function processFiles(files, accept = ['text/plain','application/json']) { const out = []; for (const f of files) { if (!accept.includes(f.type)) continue; out.push({ name: f.name, type: f.type, content: await f.text() }); } return out; }