拖放 - getData() 返回空字符串

【问题标题】：Drag & drop - getData() returns empty string拖放 - getData() 返回空字符串
【发布时间】：2015-08-21 11:50:11
【问题描述】：

我正在尝试创建一个可以读取和显示纯文本文件的简单网络应用程序。我希望它通过将文件拖放到div 上来打开文件。

这是我处理 drop 事件的代码：

dropHere.addEventListener('drop', function(e) {
  e.preventDefault();
  var data = e.dataTransfer.getData('text');
  console.log(data);
});

很简单，对吧？只有...它记录一个空的string。
我真的很困惑。我错过了一些琐碎的事情吗？

e.dataTransfer.files[0] 返回一个File 对象，具有正确的文件名、大小甚至文件类型。

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

好的，所以我浏览了一些允许拖放文件上传的页面，并找到了解决此问题的方法。使用FileReader 而不是getData()。

这就是代码现在的样子（从 CoffeeScript 生成）：

var loadFile;

empty.addEventListener('drop', function(e) {
  var file, files, i, len, results;
  e.preventDefault();
  files = e.dataTransfer.files;
  results = [];
  for (i = 0, len = files.length; i < len; i++) {
    file = files[i];
    results.push(loadFile(file));
  }
  return results;
});

loadFile = function(file) {
  var reader;
  reader = new window.FileReader;
  reader.onload = function(e) {
    return content.innerHTML = reader.result;
  };
  return reader.readAsText(file);
};

现在一切正常。

【讨论】：