JavaScript中有没有办法检测文件是否可以放在使用的设备上？答案

【问题标题】：Is there a way in JavaScript to detect if files can be dropped on the used device?JavaScript中有没有办法检测文件是否可以放在使用的设备上？
【发布时间】：2020-12-17 14:37:59
【问题描述】：

我在一个网站上创建了一个允许用户上传文件的表单。用户还可以将文件拖放到此表单上。但是，在某些设备上，根本无法拖放文件（例如在我的 iPhone 上）。所以我只想在有意义的设备上显示文本“在此处拖放文件”。

有没有办法检测设备原则上是否支持拖放文件？一种解决方法可能是检测鼠标指针是否正在移动。在这种情况下，我猜想可以拖放文件。不过，这只是猜测。

有没有更合适的方法来检测这个？请注意，我不想检测浏览器是否支持拖放，而是浏览器是否支持拖放文件。

【问题讨论】：

标签： javascript drag-and-drop feature-detection browser-feature-detection

【解决方案1】：

您可以使用 window.navigator.userAgent 来检测用户正在使用的操作系统。 userAgent 返回一个字符串，您可以解析该字符串以尝试检测其中的某些关键字。我在geeks for geeks 看了这篇文章。连同这个 stackoverflow 答案here。通过将两者结合起来，您应该能够挑选出某些关键字并在大多数情况下检测用户正在使用的内容。似乎较旧的手机可能存在此问题，因此可能并不完美。

if (navigator.appVersion.indexOf("Mac") != -1) {
  onWeb = true;
} 
if (navigator.appVersion.indexOf("Win") != -1) {
  onWeb = true;
} else {
onWeb = false;
}

在我个人看来（请对此持保留态度）与旧设备上的潜在错误相关的工作量不值得所涉及的工作。正因为如此，我会尝试使用文本来通知用户拖放潜力，并给他们一个按钮来上传文件。一些用户更喜欢通过拖放（我自己）手动上传文件的能力，并且通过使这两个选项都可用，它允许用户使用他们最喜欢的任何选择。

【讨论】：

感谢您的回答。您对应该始终存在的按钮是绝对正确的（也是出于可访问性的原因）。然而，我只想隐藏不支持它的设备上的放置区域，因为它在那里看起来很奇怪。与此同时，我决定只在非触控设备上显示拖放区域，即使有支持它的触控设备。