javascript - 通过拖放到文本区域加载文本文件

Question

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

Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type '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>