我在一个网站上创建了一个表单,允许用户上传文件.用户还可以将文件拖放到此表单上.但是,在某些设备上,根本无法拖放文件(例如在我的 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中有没有办法检测文件是否可以放在使用的设备上?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!
在 javascript 认为文档“准备好"之前,如何让How can I get my jasmine tests fixtures to load before the javascript considers the document to be quot;readyquot;?(在 javascript 认为文档“准备好
jasmine 运行和等待实际上是做什么的?What do jasmine runs and waitsFor actually do?(jasmine 运行和等待实际上是做什么的?)
如何提供模拟文件来更改 <input type='filHow to provide mock files to change event of lt;input type=#39;file#39;gt; for unit testing(如何提供模拟文件来更改 lt;input type=filegt; 的事
如何使用 Jasmine 对链式方法进行单元测试How to unit test a chained method using Jasmine(如何使用 Jasmine 对链式方法进行单元测试)
如何将 $rootScope 注入 AngularJS 单元测试?How do I inject $rootScope into an AngularJS unit test?(如何将 $rootScope 注入 AngularJS 单元测试?)
Jasmine - 如何监视函数中的函数调用?Jasmine - How to spy on a function call within a function?(Jasmine - 如何监视函数中的函数调用?)