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

Question

您好我正在尝试使用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);
  };

但我得到同样的错误,任何想法？谢谢.

Answer 1

大概你正在使用这个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]' : ''));
          ...
        });
      }
    }

请注意,它们也将它包装在保护性检查中,文件[i]实际上是一个文件; 这是我上面的测试代码,但在代码中遗漏了.

但是,如果您只是尝试访问这些文件,是否有理由要使用此实验方法？这是一个非常简单的循环,使用FileReader来读取文件,然后使用Blob-ify,然后将其存储在本地FileSystem中......并且所有这些方法都不是实验性的和新的.

参考文献:

[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

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

更新2012年7月26日:

此方法现已删除了标记要求,并可在7月23日发布Chrome 21时使用.但是,对于这里描述的用例,上面的实现要简单得多,并且更适合需要,因为不需要同时也能读取整个目录.