javascript - 通过在 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>

标签： javascriptdrag-and-dropfilereader

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>