Question

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

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

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

非常简单，是吧？只有...它会记录一个空的string 我真的很困惑。我错过了一些微不足道的事情吗？

e.dataTransfer.files[0]返回一个File对象，其文件名，大小和文件类型都正确。

Answer 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);
};

现在一切正常。

拖拽drop - getData（）返回空字符串

1 个答案: