通过在 Textarea 上拖放来加载 Textfile

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>

通过在 Textarea 上拖放来加载 Textfile

Load Textfile via Drag and Drop on Textarea

javascript

drag-and-drop

filereader