检测何时将文件拖动到文件输入上

Question

我有这段代码来检测用户点击文件输入以上传文件的时间。

$('input:file').click(function() {
    // do stuff here
});

我发现许多用户正在将文件拖到文件输入上以上传文件，而这在发生时并未触发。我考虑过mouseover，可能与mouseup结合使用，但我不知道如果用户在执行此操作时是否持有文件我将如何知道。

为了澄清，我不需要帮助实现拖放。此外，如果可能的话，我想继续使用文件输入，而不是使用涉及到其他元素（如div）的解决方案。我希望drop保留在实际的文件输入上。

如何检测文件输入上拖动的文件，以便我能对其做出反应？

Answer 1

您可以对浏览器本机拖动事件做出反应，例如dragenter和dragleave

container.addEventListener("dragenter", this.dragenter, true);
container.addEventListener("dragleave", this.dragleave, true);

因此，您只需要定义拖动发生时要监控的区域以及您对此事件的操作。