拖放 - getData（）返回空字符串

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

現在一切工作正常。