拖放文件时，dataTransfer.items 属性在 Firefox 和 IE 中未定义，但在 Chrome 中则不然

Question

将文件拖放到某个元素上时，Chrome 会使用引用所拖放文件的对象来填充拖放事件的dataTransfer.items数组。Firefox 和 IE 没有。这些浏览器都填充 dataTransfer.files 属性。

function doDrop(e) {
  e.stopPropagation();
  e.preventDefault();      
  var files = e.dataTransfer.files //All browsers have this property
  var items = e.dataTransfer.items //Only Chrome has this property
}

那么为什么浏览器之间存在差异呢？Chrome 是对的吗？IE和Firefox落后了吗？有任何“正式”文件或来源对此进行解释吗？

在各种浏览器中运行此File Drop Plunkr 示例以查看差异。

Answer 1

根据 HTML5.1 规范 ( http://www.w3.org/TR/html51/editing.html#the-datatransfer-interface )

interface DataTransfer {
  attribute DOMString dropEffect;
  attribute DOMString effectAllowed;

  [SameObject] readonly attribute DataTransferItemList items;

  void setDragImage(Element image, long x, long y);

  /* old interface */
  [SameObject] readonly attribute DOMString[] types;
  DOMString getData(DOMString format);
  void setData(DOMString format, DOMString data);
  void clearData(optional DOMString format);
  [SameObject] readonly attribute FileList files;
};

请注意，该files属性位于“旧界面”部分，而items位于当前界面。

看来 Chrome 走在了前面。它同时实现旧界面和当前界面，而其他浏览器仅实现旧界面。