html5 拖放 - items.webkitGetAsEntry(） 方法不存在

html5 drag and drop - items.webkitGetAsEntry() method doesn't exist

本文关键字：方法 不存在 webkitGetAsEntry 拖放 items html5      更新时间：2023-09-26

您好，我正在尝试使用 Chrome 将文件拖放到我的文件系统中，但在控制台中出现以下错误：

var dnd = new DnDFileController('body', function(files, e) {
    var items = e.dataTransfer.items;
    for (var i = 0, item; item = items[i]; ++i) {
      traverseFileTree(item.webkitGetAsEntry());
**Uncaught TypeError: Object #<DataTransferItem> has no method 'webkitGetAsEntry'**
    }
  });

我还尝试在循环中添加该方法，如下所示：

for (var i = 0, item; item = items[i].webkitGetAsEntry();; ++i) {
      traverseFileTree(item);
    }

错误是这样的：

Uncaught TypeError: Object #<DataTransferItem> has no method 'webkitGetAsEntry' app.js:513
(anonymous function) app.js:513
DnDFileController.drop dnd.js:27

DNDFileController.drop 代码如下：

this.drop = function(e) {
    e.stopPropagation();
    e.preventDefault();
    el_.classList.remove('dropping');
    onDropCallback(e.dataTransfer.files, e);
  };

但是我得到了同样的错误，有什么想法吗？谢谢。

大概你正在使用这个 DnDFileController - http://html5-demos.appspot.com/static/filesystem/filer.js/demos/js/dnd.js . 因此，首先，我已将您的代码设置为可测试状态，如下所示：

function DnDFileController(selector, onDropCallback) {
  var el_ = document.querySelector(selector);
  this.dragenter = function(e) {
    e.stopPropagation();
    e.preventDefault();
    el_.classList.add('dropping');
  };
  this.dragover = function(e) {
    e.stopPropagation();
    e.preventDefault();
  };
  this.dragleave = function(e) {
    e.stopPropagation();
    e.preventDefault();
    //el_.classList.remove('dropping');
  };
  this.drop = function(e) {
    e.stopPropagation();
    e.preventDefault();
    el_.classList.remove('dropping');
    onDropCallback(e.dataTransfer.files, e);
  };
  el_.addEventListener('dragenter', this.dragenter, false);
  el_.addEventListener('dragover', this.dragover, false);
  el_.addEventListener('dragleave', this.dragleave, false);
  el_.addEventListener('drop', this.drop, false);
};
var dnd = new DnDFileController('body', function(files, e) {
    var items = e.dataTransfer.items;
    for (var i = 0, item; item = items[i]; ++i) {
      if (item.kind == 'file') {
          debugger
          console.log(item.webkitGetAsEntry());
      }
    }
  });

现在，在Chrome 20.0.1132.27 beta中检查调试器中项目的状态，它只公开当前规范[1]中的那些属性和方法 - 即item.kind，item.type，item.getAsString(callback(和item.getAsFile((。 DataTransferItem.webkitGetAsEntry(( 未公开。 据我所知[2]，Chrome 还不应该公开他们提议的 webkitGetAsEntry，在它打开一周后[3]，他们又关闭了开关。 所以目前，除非你使用任何标志来启用它[4]。

启用它后，它看起来也像getAsString一样，与回调一起使用，而不仅仅是作为getter。 参见 [5] 中的示例：

    var items = e.dataTransfer.items;
    for (var i = 0; i < items.length; ++i) {
      if (items[i].kind == 'file') {
          items[i].webkitGetAsEntry(function(entry) {
          displayEntry(entry.name + (entry.isDirectory ? ' [dir]' : ''));
          ...
        });
      }
    }

请注意，他们还将其包装在保护性检查中，即file[i]实际上是一个文件;这在上面的测试代码中，但在您的代码中缺少。

但是，如果您只是尝试访问文件，那么是否有理由要使用这种实验性方法？ 这是一个非常简单的循环，使用 FileReader 读取文件，然后将其 Blob 化，然后将其存储在本地文件系统中...... 所有这些方法都远没有那么实验性和新颖性。

裁判：

[1] http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-datatransferitem-interface

[2] http://trac.webkit.org/changeset/118507

[3] http://code.google.com/p/chromium/issues/detail?id=129702

[4] https://bugs.webkit.org/show_bug.cgi?id=87457

[5] http://lists.w3.org/Archives/Public/public-whatwg-archive/2012Apr/0078.html

====

==========================================================

更新 7/26/2012：

此方法现已删除标志要求，并在 12 年 7 月 23 日发布的 Chrome 21 中可供常规使用。 但是，对于此处描述的用例，上述实现要简单得多，并且更适合需求，因为不需要同时读取整个目录。

相关文章：