是否可以使用 jQuery 的drop事件从桌面拖动文件？
如果是这样，我如何获取删除的文件数据？
如何使用 jQuery 的 drop 事件上传从桌面拖拽的文件？
IT技术
javascript
jquery
html
drag-and-drop
2021-03-07 15:13:09
1个回答
这有点混乱（您需要处理至少 3 个事件）但可能。
首先，您需要为这些事件添加事件处理程序dragover并dragenter阻止这些事件的默认操作，例如：
$('#div').on(
'dragover',
function(e) {
e.preventDefault();
e.stopPropagation();
}
)
$('#div').on(
'dragenter',
function(e) {
e.preventDefault();
e.stopPropagation();
}
)
调用preventDefault这些事件实际上很重要，否则某些浏览器可能永远不会触发该drop事件。
然后您可以添加放置处理程序并使用以下命令访问放置的文件e.originalEvent.dataTransfer.files：
$('#div').on(
'drop',
function(e){
if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
e.preventDefault();
e.stopPropagation();
/*UPLOAD FILES HERE*/
upload(e.originalEvent.dataTransfer.files);
}
}
);
现在您可以从 div 中的桌面/资源管理器/查找器中拖动文件并访问它们。