问题描述

我在一个网站上创建了一个表单，允许用户上传文件.用户还可以将文件拖放到此表单上.但是，在某些设备上，根本无法拖放文件(例如在我的 iPhone 上).所以我只想显示文本Drag and drop files here".仅在有意义的设备上使用.

I created a form on a website that allows users to upload files. Users can also drag and drop files onto this form. However, on some devices, it is simply not possible to drag and drop files (e.g. on my iPhone). So I only want to display the text "Drag and drop files here" only on devices on which it makes sense.

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

Is there a way to detect whether the device supports drag and drop files in principle? A workaround could be to detect if a mouse pointer is moving. In this case, I would guess it is possible to drag and drop files. However, it would only be a guess.

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

Is there a more suitable way to detect this? Please note that I don't want to detect if the browser supports drag and drop in general, but if the browser supports drag and drop files.

推荐答案

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

You could use window.navigator.userAgent in order to detect what OS the user is using. userAgent returns a string and you could parse through the string to try and detect certain keywords inside of it. I looked at this article at geeks for geeks. Along with this stackoverflow answer here. by combining the two you should be able to pick out certain keywords and detect what the user is on for most cases. It seems that older phones might have an issue with this so it may not be perfect.

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

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

In my personal opinion (please take this with a grain of salt) the amount of work involved in this with the potential errors on older devices isn't worth the work involved. Because of this I would try to use text to inform the user of the Drag and Drop potential as well as giving them a button to upload files. Some users prefer the ability to manually upload files over a drag and drop (myself), and by having both options readily available it allows users to utilize which ever choice they prefer most.

这篇关于JavaScript中有没有办法检测文件是否可以放在使用的设备上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！