通过拖放在Textarea上加载文本文件

Question

我正在尝试添加将文本文件拖放到文本区域的功能。但是，出现以下错误。

未捕获的TypeError：无法在'FileReader'上执行'readAsText'：参数1不是'Blob'类型。

根据错误行19，这是

reader.readAsText(input.files[0],"UTF-8");

我看到这是在说parameter 1 is not of type 'Blob'；但是，有人可以解释为什么显示此错误，我该怎么办才能解决此错误？

function dropfile(input) {
  var reader = new FileReader();  
  reader.onload = function(e) {            
    notepad.value = e.target.result;
  }        
  reader.readAsText(input.files[0],"UTF-8");
};
notepad.ondrop = function(e) {
  this.value = "";
  e.preventDefault();
  var file = e.dataTransfer.files[0];
  dropfile(file);
};

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#notepad {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border: 0;
  padding: 1em;
  width: calc(100vw - 2em);
  resize: none;
}
#notepad:focus {
  outline: 0;
}

<textarea id="notepad" placeholder="drag and drop your .txt file"></textarea>

Answer 1

您正在将文件传递给dropfile功能。

var file = e.dataTransfer.files[0];
dropfile(file);

在dropfile功能中，您使用了它错误。

reader.readAsText(input.files[0],"UTF-8"); 
您应将行更改为

reader.readAsText(input,"UTF-8"); 
尝试下面的代码段。

function dropfile(file) {
        var reader = new FileReader();
        reader.onload = function(e) {
          notepad.value = e.target.result;
        };
        reader.readAsText(file, "UTF-8");
      }
  notepad.ondrop = function(e) {
    e.preventDefault();
    var file = e.dataTransfer.files[0];
    dropfile(file);
  };
html,
      body {
        height: 100%;
        padding: 0;
        margin: 0;
      }

      #notepad {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        border: 0;
        padding: 1em;
        width: calc(100vw - 2em);
        resize: none;
      }
      #notepad:focus {
        outline: 0;
      }
<textarea
      id="notepad"
      placeholder="drag and drop your .txt file"
    ></textarea>