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

【问题标题】：When dragging and dropping a file, the dataTransfer.items property is undefined in Firefox and IE, but not Chrome拖放文件时，在 Firefox 和 IE 中未定义 dataTransfer.items 属性，但在 Chrome 中未定义
【发布时间】：2015-02-06 16:23:00
【问题描述】：

将文件拖放到元素上时，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
}

那么为什么在浏览器中存在差异？铬是对的吗？ IE 和 Firefox 落后了吗？是否有任何“正式”文档或资料可以解释这一点？

在各种浏览器中运行这个File Drop Plunkr Example，看看有什么不同。

【问题讨论】：

e.dataTransfer.files 在 Firefox 中不起作用。

标签： javascript html

【解决方案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 似乎处于领先地位。它同时实现了旧接口和当前接口，而其他浏览器只实现了旧接口。

【讨论】：