Javascript 如何确定 HTML5 拖放文件上传 API 的存在（如 FF3.6 中的那个）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2311887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to determine presence of HTML5 drag'n'drop file upload API (like the one from FF3.6)
提问by konryd
I am writing an application that's supposed to support HTML5 drag/drop API for file, much like the on described here. I would like to perform a programmatic check on whether the browser support this kind of madness :) A solution that works for now is checking whether the browser provides a FileReader class, like this:
我正在编写一个应该支持 HTML5 文件拖放 API 的应用程序，很像这里描述的。我想对浏览器是否支持这种疯狂进行编程检查:) 目前有效的解决方案是检查浏览器是否提供 FileReader 类，如下所示：
if (typeof(FileReader) == "undefined") {
$("#dropbox").hide();
} else {
// connect events
$("#filebox").hide();
}
But it is obviously not a correct one (I don't use that class at all).
但这显然不是正确的（我根本不使用该类）。
Any ideas?
有任何想法吗？
采纳答案by Paul Rouget
if ("files" in DataTransfer.prototype) {...}
回答by dshaw
Checking for the existence of FileReader is the correct way to go about this. FileReader is an official part of the File Api. I would combine this with Modernizr. Drag and Drop support is slated for release 1.2. You should be able to grab the source on GitHub and start working with this now. http://github.com/Modernizr/Modernizr/blob/master/modernizr.js
检查 FileReader 是否存在是解决此问题的正确方法。FileReader 是File Api的官方部分。我会将它与Modernizr结合起来。拖放支持计划在 1.2 版中提供。您应该能够在 GitHub 上获取源代码并立即开始使用它。 http://github.com/Modernizr/Modernizr/blob/master/modernizr.js
if (!!FileReader && Modernizr.draganddrop) {
// sexy drag and drop action
} else {
// no drag and drop support available :(
}
If you haven't seen Dive into HTML5, you should definitely check out Mark Pilgrim's suggestions on detecting HTML5.
如果您还没有看过Dive into HTML5，那么您绝对应该查看 Mark Pilgrim 关于检测 HTML5的建议。
回答by matt burns
回答by German Latorre
If you don't want to deal with Modernizr at all, you can just replicate what it does for drag'n'drop detection:
如果您根本不想处理 Modernizr，您可以复制它对拖放检测的作用：
var supportsDragAndDrop = function() {
var div = document.createElement('div');
return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}
Got it from Modernizr GitHub repository:
从 Modernizr GitHub 存储库中获取：
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js
回答by Alfishe
either use pure Modernizr approach
要么使用纯 Modernizr 方法
if (Modernizr.filereader && Modernizr.draganddrop) {
//sexy drag and drop action
} else {
//no drag and drop support available :(
};
or use underlying DOM check directly but with exception handling
或直接使用底层 DOM 检查但有异常处理
var featuresSupported = false;
try {
if (!!(window.File && window.FileList && window.FileReader) && Modernizr.draganddrop)
featuresSupported = true;
)
catch (err)
{
}
if (featuresSupported)
<do sexy effects>
else
<perform rollback to legacy stuff>
回答by Steven Benjamin
This code fails in IE8. This would probably be better:
此代码在 IE8 中失败。这可能会更好：
if (typeof(FileReader) === 'function' && Modernizr.draganddrop) {
//sexy drag and drop action
} else {
//no drag and drop support available :(
};
回答by N A
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('The File APIs are not fully supported in this browser. Please upgrade your browser.');
}
回答by Mark Kasson
Its a bit trickier. iOS7 reports that it supports both FileReader and draganddrop pictures uploading. Since I was looking for a more general file upload that I couldn't do with iOS, I needed another answer.
它有点棘手。iOS7 报告它支持 FileReader 和拖放图片上传。由于我正在寻找 iOS 无法实现的更通用的文件上传，因此我需要另一个答案。
Modernizr issue 57 at heretalks about the issue. Now with windows 8 and both touch and mouse, its tricky. There's code in the middle by chriskeeble that I used successfully. It relies on Modernizr and agent detection.
Modernizr issue 57 at here讨论了这个问题。现在有了 Windows 8 以及触摸和鼠标，这很棘手。chriskeeble 中间有我成功使用的代码。它依赖于 Modernizr 和代理检测。
