如何确定 HTML5 拖放文件上传 API 的存在（如 FF3.6 中的那个）

Posted 2023-05-08

【中文标题】如何确定 HTML5 拖放文件上传 API 的存在（如 FF3.6 中的那个）

【英文标题】：How to determine presence of HTML5 drag'n'drop file upload API (like the one from FF3.6)

【发布时间】：2011-01-19 16:37:12

【问题描述】：

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

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

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

有什么想法吗？

【参考方案1】：

检查是否存在 FileReader 是解决此问题的正确方法。 FileReader 是File Api 的官方部分。我会将它与Modernizr 结合起来。拖放支持是slated for release 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 :(

如果你还没有看过Dive into HTML5，你一定要看看Mark Pilgrim 在detecting HTML5 上的建议。

【讨论】：

我不确定这是否可行。它检查 div 对象中是否存在 ondrag、ondrop、ondragleave 等属性。这适用于 Chrome，但仍然不允许您将文件拖放到网站中。

reader = new FileReader(); if (reader && Modernizer.draganddrop) ... 需要测试一下。

更新了我的建议，包括检查 FileReader 对象，尽管 if(!!FileReader) 可能就足够了。 :) 我在 FF3.6 和 Chrome 中对此进行了测试，并且可以正常工作。

if (!!FileReader) 在 IE8 中抛出“FileReader is undefined”错误

@mattb，对于 IE8，您需要 window.FileReader。有关完整示例，请参阅我的答案。

【参考方案2】：

我不得不对dshaw 的回答稍作改动以获得对 IE8 的支持：

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

你可以试试here

【讨论】：

IE9 中也需要 !!window.FileReader。

您可以包含Modernizr.filereader，它可以更好地覆盖所有浏览器。

也许我对 javascript 了解不够，但!! 有必要吗？声明!!window.FileReader不等于window.FileReader吗？

@racl101 这是一种将对象类型强制转换为布尔值的晦涩方式......对于 JS 新手来说不是特别可读，抱歉！ ***.com/questions/784929/…

【参考方案3】：

if ("files" in DataTransfer.prototype) ...

【讨论】：

没有。原型是一个核心的 JS 编程结构。 en.wikipedia.org/wiki/JavaScript

@konryd 请参阅mckoss.com/jscript/object.htm 以更好地探索 JS 对象原型。

不知道为什么，但是下面的代码在 Chrome 上不起作用 if ("files" in DataTransfer.prototype) alert('Drag Drop file support is there'); 它说... Uncaught ReferenceError ：未定义数据传输。你能帮忙吗...

webkit 不公开 DataTransfer 对象，请参阅github.com/Modernizr/Modernizr/issues#issue/57

为什么这被标记为正确，而实际上却不是？至少不能跨浏览器。

【参考方案4】：

如果您根本不想处理 Modernizr，您可以复制它对拖放检测的作用：

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

从 Modernizr GitHub 存储库获得：

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js

【参考方案5】：

要么使用纯粹的 Modernizr 方法

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>

【参考方案6】：

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

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

【参考方案7】：

if (!window.File || !window.FileReader || !window.FileList || !window.Blob) 
  alert('The File APIs are not fully supported in this browser. Please upgrade your browser.');

【参考方案8】：

它有点棘手。 ios7 报告它同时支持 FileReader 和拖放图片上传。由于我正在寻找一个更通用的文件上传，而我无法在 iOS 上完成，我需要另一个答案。

Modernizr 第 57 期here 讨论了这个问题。现在有了 Windows 8 和触摸和鼠标，它很棘手。 chriskeeble 中间有我成功使用的代码。它依赖于 Modernizr 和代理检测。