在网页中实现文件拖拽上传时，开发者往往直接信任用户拖入文件的扩展名，这种做法会带来明显的安全风险。浏览器提供的拖放API本身并不负责内容校验，Drop事件拿到的File对象只是对磁盘文件的抽象引用，真正安全的类型识别必须结合元数据与二进制特征。
拖放API的基础事件流
要使用拖放API接收文件，首先需要在目标容器上监听三个核心事件：dragenter、dragover和drop。其中dragover必须调用preventDefault，否则浏览器会直接以网页跳转形式打开文件，导致drop事件无法触发。很多初学者忽略这一点，导致拖放功能完全失效。
在drop事件的回调中，通过event.dataTransfer.files可以拿到FileList对象。这个对象类似数组，但不可直接调用数组方法，需要用索引或Array.from转换。每一个File实例都包含name、size、type等属性，但type由系统根据扩展名推断，并不可靠。
const box = document.getElementById('drop-zone');
box.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须阻止默认行为
e.dataTransfer.dropEffect = 'copy';
});
box.addEventListener('drop', (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
Array.from(files).forEach(file => {
console.log(file.name, file.type, file.size);
});
});
为什么不能只信File.type
File.type返回的是MIME类型字符串，例如图片通常是image/png。但这个值来源于操作系统对文件扩展名的映射，用户可以轻易把可执行文件改名为demo.png，此时type仍为image/png，但内容完全是危险代码。如果后端仅依赖前端类型展示或轻量处理，就可能被绕过。
另一个问题是部分文件类型在跨平台时映射不一致，例如.webp在旧系统可能返回空字符串。因此type只能作为第一道粗略筛子，真正判断还要读取文件头部字节，也就是常说的Magic Number。
基于Magic Number的二次校验
大多数文件格式在开头几个字节有固定标识，比如PNG是89 50 4E 47，JPEG是FF D8 FF。我们可以在Drop事件中用Blob.slice截取前几字节，交给FileReader异步读取，再与白名单比对。这种方式不加载整个文件，对大文件也友好。
下面示例定义了一个简单校验函数，仅允许PNG和JPEG。注意FileReader的readAsArrayBuffer是异步的，需要用Promise包装以便串行处理多个文件。
function checkFileType(file) {
// 白名单：扩展名与头部签名
const rules = {
'image/png': [0x89, 0x50, 0x4E, 0x47],
'image/jpeg': [0xFF, 0xD8, 0xFF]
};
const head = rules[file.type];
if (!head) return Promise.resolve(false);
const slice = file.slice(0, head.length);
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = () => {
const bytes = new Uint8Array(reader.result);
const match = head.every((b, i) => bytes[i] === b);
resolve(match);
};
reader.onerror = () => resolve(false);
reader.readAsArrayBuffer(slice);
});
}
box.addEventListener('drop', async (e) => {
e.preventDefault();
for (const file of Array.from(e.dataTransfer.files)) {
const ok = await checkFileType(file);
if (!ok) {
alert('文件类型不合法：' + file.name);
continue;
}
// 后续上传逻辑
}
});
构建类型白名单与异常处理
实际项目中，建议把允许的类型抽成配置表，包含MIME、扩展名和签名三段信息，便于维护。同时Drop事件可能拿到零个文件（例如拖了文本），需先判断files.length。对于读取失败的文件，应当视为不可信并拒绝，而不是默认通过。
另外，在UI层面应给用户明确反馈。比如校验失败时高亮拖放区并显示原因，而不是静默丢弃。下表列出常见类型的头部签名供参考：
| 格式 | MIME | 头部字节（十六进制） |
|---|---|---|
| PNG | image/png | 89 50 4E 47 |
| JPEG | image/jpeg | FF D8 FF |
| application/pdf | 25 50 44 46 |
性能与安全的平衡
如果页面需要支持拖入视频或压缩包，头部签名可能更长，但一般前16字节足够判断。切勿为校验而读取全部内容到内存，在低端设备上会造成卡顿。Blob.slice保证了我们只触碰极小部分数据。
最后提醒，前端校验只是体验与减负手段，真正的安全边界必须在服务端重做。任何从浏览器过来的文件都不可信，前端拦截只是为了减少无效请求和误导用户。
JavaScript拖放API文件类型验证修改时间：2026-08-05 10:57:39