检测文件何时被拖到文件输入

Posted 2023-05-08

【中文标题】检测文件何时被拖到文件输入

【英文标题】：Detect when a file is dragged onto a file input

【发布时间】：2017-05-18 20:56:48

【问题描述】：

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

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

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

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

如何检测文件输入中被拖动的文件，以便我对它做出反应？

【问题讨论】：

您是否尝试过使用mousemove() 获取指针的位置？ api.jquery.com/mousemove

试试这个页面w3schools.com/html/html5_draganddrop.asp

@GôTô 那是如何在元素上实现拖动。用户没有拖动元素，他们正在拖动浏览器文件，所以这似乎不是我需要的。此外，w3schools 非常糟糕、不完整，而且经常具有误导性。

@Goose 即使在这种情况下，drop 事件也是相关的，请参阅***.com/questions/10261989/…

@GôTô，我的文件输入未使用 javascript 设置以允许拖放，这只是默认的浏览器行为。也许您可以发布一个答案，说明如何在我的案例中应用它，因为目前我不确定从中得到什么。

【参考方案1】：

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

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

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

【讨论】：

看起来像我需要的，但我的尝试没有奏效，请参阅我更新的问题以了解我如何尝试应用它。

似乎它适用于这个小提琴。请重新检查jsfiddle.net/3fnatryv AddEventListener 是本机浏览器事件，因此您需要从 jQuery 搜索中获取 DOM 元素。我使用第一个元素 [0]

啊，我明白了。谢谢！

请注意 jsfiddle，由于有多个输入，我已经像这样 foreach 了。 jsfiddle.net/3fnatryv/1

【参考方案2】：

我看到当我在输入上拖动文件时，没有任何 Javascript（“更改”事件除外），我设法做到了。