核心是用容器承载并设tabindex="0"，内嵌display: none的，容器需监听dragover（必须preventdefault）和drop事件以捕获filelist。
拖拽上传区域的 HTML 结构怎么写
核心是用 <div> 容器承载，不依赖 <code><input type="file"> 的默认样式，但必须让它在背后实际工作。不能只靠视觉欺骗——否则文件选中后无法被 JS 捕获。
- 必须保留一个隐藏的
<input type="file">元素，设display: none或visibility: hidden（不能用opacity: 0，某些浏览器会阻止交互） - 拖拽容器需显式设置
dropzone="copy"（可选，但能提升语义和部分浏览器提示行为） - 给容器加
tabindex="0"，确保键盘用户也能聚焦并按空格/回车触发文件选择
<div id="drop-area" tabindex="0"> <p>拖拽文件到这里，或点击上传</p> <input type="file" id="file-input" multiple style="display: none"> </div>
如何监听拖拽进入、悬停和释放事件
浏览器对拖拽有严格限制：只有阻止 dragover 和 drop 的默认行为，才能让 drop 事件真正触发。漏掉 preventDefault() 是最常见失败原因。
-
dragenter：仅用于首次进入时添加高亮类，不要在这里做文件校验（此时还拿不到文件列表） -
dragover：必须调用event.preventDefault()，否则浏览器认为不接受拖放，drop永远不会触发 -
drop：在这里取event.dataTransfer.files，然后调用隐藏<input>的files属性赋值（不行，files是只读的），所以得用dataTransfer.items或直接处理event.dataTransfer.files
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragenter', e => {
e.preventDefault();
dropArea.classList.add('drag-over');
});
dropArea.addEventListener('dragover', e => e.preventDefault()); // 关键
dropArea.addEventListener('drop', e => {
e.preventDefault();
dropArea.classList.remove('drag-over');
const files = e.dataTransfer.files;
handleFiles(files);
});
点击区域如何触发原生文件选择框
不能直接对隐藏 <input> 调用 .click() 后就不管了——现代浏览器要求该调用必须由用户手势（如 click、touchend）同步触发，异步延迟（如 setTimeout）会静默失败。
- 直接绑定
click到容器上，内部调用fileInput.click() - 如果要支持多选，确保
<input>有multiple属性 - 不要试图用
label[for]关联隐藏 input——它在display: none下多数浏览器会忽略点击穿透
dropArea.addEventListener('click', () => {
document.getElementById('file-input').click();
});
document.getElementById('file-input').addEventListener('change', e => {
handleFiles(e.target.files);
});
为什么 FileReader 读取大文件容易卡住或报错
FileReader 是同步阻塞主线程读取的（尤其 readAsArrayBuffer 或 readAsDataURL），100MB 文件可能让页面冻结数秒。而且 readAsDataURL 会把二进制转为 base64 字符串，内存占用翻倍。
- 小文件（readAsDataURL 预览图片
- 大文件优先用
readAsArrayBuffer+fetch分块上传，或直接用file.slice()构造Blob分片 - 始终监听
onerror和onabort，FileReader报错时error属性是null，得靠event.target.error拿具体信息
function readFirstChunk(file) {
const reader = new FileReader();
reader.onload = e => console.log(new Uint8Array(e.target.result).slice(0, 8));
reader.onerror = () => console.error('读取失败:', reader.error?.message);
reader.readAsArrayBuffer(file.slice(0, 8)); // 只读前8字节
}
拖拽上传看似简单，真正上线时最常崩在 Safari 对 dataTransfer.items 的兼容性、移动端 touch 事件未适配、以及大文件读取时的内存失控——这些地方没日志、没降级，用户只会看到“没反应”。
