第一次拖放 FileReader() 事件但无法读取文件内容

Question

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

文本文件的内容应该显示在显示区域

参考：http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

提前致谢！

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

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

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

    window.onload = function() {
      var fileInput = document.getElementById('dropzone');
      var fileDisplayArea = document.getElementById('displayarea');

      fileInput.addEventListener('dropzone.ondrop', function(read) {
        var file = fileInput.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;
  };

  }())

Answer 1

你的代码应该是这样的。您必须删除 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;
  };

}())

第一次拖放 FileReader() 事件但无法读取文件内容

First time making my drag and drop FileReader() event but can't read the content of the file

javascript

text

filereader