拖拽文件上传问题：Drop事件中无法获取File对象，求技术解析

我帮你排查下这个拖拽获取File对象的问题哈～先看你写的代码，其实已经做对了大半，但可能差了关键的一步——没有读取dataTransfer.files这个核心属性，另外还有几个细节可以优化：

你的代码里的关键点分析 #

1. 你已经知道在jQuery的事件对象里，dataTransfer藏在originalEvent里，这部分是对的，因为jQuery会封装原生事件，所以得从e.originalEvent里取原生的事件对象。
2. 你已经在dragover里调用了e.preventDefault()和e.stopPropagation()，这非常重要——因为浏览器默认会阻止drop事件触发，必须在dragover里阻止默认行为才能让drop正常触发，这部分你没出错。

修正后的代码（带注释） #

$(".file-field").on('dragover', function(e) {
    e.preventDefault()
    e.stopPropagation();
    console.log('dragover');
}); 

$(".file-field").on('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    // 直接获取原生事件的dataTransfer，不用赋值给e（当然赋值也没问题，只是没必要）
    const dataTransfer = e.originalEvent.dataTransfer;
    console.log('dataTransfer:', dataTransfer);
    
    // 核心：从dataTransfer里取出FileList，里面就是拖入的File对象们
    const files = dataTransfer.files;
    if (files.length > 0) {
        // 遍历所有拖入的文件
        for (const file of files) {
            console.log('获取到的File对象:', file);
            // 这里可以加你的业务逻辑，比如预览文件、上传等
        }
    } else {
        console.log('没有拖入任何文件，或者拖入的不是文件类型');
    }
    
    console.log('drop');
}); 

$(".file-field").on('dragleave', function(e) {
    console.log('dragleave');
});

额外需要注意的细节 #

• 确保.file-field元素有可见的尺寸（比如设置width: 300px; height: 200px; border: 1px dashed #ccc;），不然拖拽区域太小，很难触发drop事件；
• 可以提前判断拖入的是否是文件：用dataTransfer.types.includes('Files')来验证，避免处理非文件的拖拽内容；
• 如果页面上还有其他拖拽相关的逻辑，要确保它们的事件不会干扰到当前的.file-field（比如不要在父元素上重复绑定拖拽事件，或者也做好阻止冒泡）。

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