Javascript 如何确定HTML5拖拽的存在'；n'；drop file upload API（与FF3.6中的API类似）

我正在编写一个应用程序，该应用程序应该支持HTML5文件拖放API，就像上面描述的一样。 我想对浏览器是否支持这种疯狂进行编程检查：） 目前有效的解决方案是检查浏览器是否提供FileReader类，如下所示：

  if (typeof(FileReader) == "undefined") {
    $("#dropbox").hide();
  } else {
    // connect events
    $("#filebox").hide();
  }

但它显然不是一个正确的类（我根本不使用那个类）

---

有什么想法吗？

检查FileReader是否存在是正确的方法。FileReader是的一个官方部分。我会把这和我的想法结合起来。支持拖放操作。您应该能够在GitHub上获取源代码，现在就开始使用它。

---

如果您还没有看到，您肯定应该查看Mark Pilgrim关于的建议。

我必须对的答案稍作修改，以支持IE8：

if (!!window.FileReader && Modernizr.draganddrop) {
  // sexy drag and drop action
} else {
  // no drag and drop support available :(
}

您可以尝试一下

此代码在IE8中失败。 这可能会更好：

if (typeof(FileReader) === 'function' && Modernizr.draganddrop) {
  //sexy drag and drop action
} else {
   //no drag and drop support available :(
};

---

要么使用纯粹的现代化方法

if (Modernizr.filereader && Modernizr.draganddrop) {
  //sexy drag and drop action
} else {
   //no drag and drop support available :(
};

或者直接使用底层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>

var特性支持=false；
试一试{
if（！！（window.File&&window.FileList&&window.FileReader）&&modernizer.dragandrop）
featuresSupported=真；
)
捕捉（错误）
{
}
如果（支持功能）
其他的

如果您根本不想处理Modernizer，您可以复制它对拖放检测的功能：

var supportsDragAndDrop = function() {
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}

从Modernizer GitHub存储库获得：

---

这有点棘手。iOS7报告说它同时支持文件阅读器和draganddrop图片上传。因为我在寻找一个更通用的文件上传，而我无法使用iOS，所以我需要另一个答案

---

< PrimeZrimeReST 57讨论这个问题。现在使用Windows 8和触摸和鼠标都很棘手。在SkySkeBeLead中间有一个代码，我成功地使用了它。它依赖于现代和代理检测。

我不确定这会起作用。它检查DIV对象中拖动、点滴、OnDRAPELKE等属性的存在。在中，比如说Chrome，但仍然不允许您将文件拖放到网站中。reader=new FileReader（）；if（reader&&Modernizer.dragandrop）{}…需要测试一下。更新了我的建议，包括检查FileReader对象，尽管if（！！FileReader）{}可能就足够了。：）我在FF3.6和Chrome中测试了这一点，它可以工作。

if（！！FileReader）

在IE8中抛出一个“FileReader未定义”error@mattb，对于IE8，您需要

window.FileReader

。完整示例请参见我的答案。否。prototype是一个核心JS编程结构。@konryd请参见，以更好地探索JS对象原型。不确定原因，但以下代码在Chrome if（“文件”）上不起作用在DataTransfer.prototype中）{alert（'存在拖放文件支持'）；}上面写着…未捕获引用错误：未定义数据传输。请您帮助一下…webkit没有公开数据传输对象，请看为什么标记为正确，而实际上不是？至少不是跨浏览器。您还需要在IE9中使用！！window.FileReader。您可以包括更好地覆盖所有浏览器的。也许我不知道关于JavaScript，但是

！！

是必要的吗？语句

！！window.FileReader

是否等同于

window.FileReader

？@racl101这是一种将对象类型强制转换为布尔值的模糊方式…对于JS新手来说不是特别易读的，抱歉！

if (Modernizr.filereader && Modernizr.draganddrop) {
  //sexy drag and drop action
} else {
   //no drag and drop support available :(
};

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>

var supportsDragAndDrop = function() {
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}