拖放文件时，在Firefox和IE中未定义dataTransfer.items属性，但在Chrome中未定义 [英] When dragging and dropping a file, the dataTransfer.items property is undefined in Firefox and IE, but not Chrome

问题描述

将文件拖放到元素上时，Chrome会填充放置事件的

When dragging/dropping a file onto an element, Chrome populates the drop event's dataTransfer.items array with an object referencing the file being dropped. Firefox and IE do not. These browsers all populate the dataTransfer.files property.

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落后吗?是否有任何正式"文档或资料来源对此进行解释?

在各种浏览器中运行以下文件删除插入示例，以了解它们之间的区别.

Run this File Drop Plunkr Example in various browsers to see the difference.

推荐答案

根据HTML5.1规范(

According to HTML5.1 Specs (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 在当前界面中.

Note that the files attribute is in the "old interface" section, while items is in the current interface.

因此，看来Chrome处于领先地位.它同时实现了旧界面和当前界面，而其他浏览器仅实现了旧界面.

So it seems that Chrome is ahead of the curve. It is implementing both the old interface and the current one, while the other browsers are implementing only the old interface.

这篇关于拖放文件时，在Firefox和IE中未定义dataTransfer.items属性，但在Chrome中未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！