Javascript 第一次生成拖放FileReader（）事件，但可以'；我无法读取文件的内容

您好，我需要有关如何使拖放读取拖放区中拖放的.text文件的帮助。。我仍在探索javascript，需要帮助来指导我的代码出了什么问题

文本文件的内容应显示在显示区上

参考：

提前谢谢

---

您的代码应该是这样的。您必须删除

onload

事件侦听器。这里不可能兼容

(function() {
  var dropzone = document.getElementById("dropzone");

  dropzone.ondrop = function(event) {
    event.preventDefault();
    this.className = "dropzone";

    console.log(event.dataTransfer.files[0]);


      var fileInput = document.getElementById('dropzone');
      var fileDisplayArea = document.getElementById('displayarea');

        var file = event.dataTransfer.files[0]
        var textType = /text.*/;

        if (file.type.match(textType)) {
          var reader = new FileReader();

          reader.onload = function(read) {
            fileDisplayArea.innerText = reader.result;
          }

          reader.readAsText(file);
          }

          else {
            fileDisplayArea.innerText = "File not supported!";
          }
}

  dropzone.ondragover = function() {
    this.className = "dropzone dragover";
    return false;
  };

  dropzone.ondragleave = function() {
    this.className = "dropzone";
    return false;
  };

}())

---

谢谢你的回复。我删除了那段代码。但是，它仍然不会显示reader.resultI在JSFIDLE上测试的结果，并且它会读取txt文件的内容。

(function() {
  var dropzone = document.getElementById("dropzone");

  dropzone.ondrop = function(event) {
    event.preventDefault();
    this.className = "dropzone";

    console.log(event.dataTransfer.files[0]);


      var fileInput = document.getElementById('dropzone');
      var fileDisplayArea = document.getElementById('displayarea');

        var file = event.dataTransfer.files[0]
        var textType = /text.*/;

        if (file.type.match(textType)) {
          var reader = new FileReader();

          reader.onload = function(read) {
            fileDisplayArea.innerText = reader.result;
          }

          reader.readAsText(file);
          }

          else {
            fileDisplayArea.innerText = "File not supported!";
          }
}

  dropzone.ondragover = function() {
    this.className = "dropzone dragover";
    return false;
  };

  dropzone.ondragleave = function() {
    this.className = "dropzone";
    return false;
  };

}())