Загрузить текстовый файл с помощью перетаскивания на Textarea - PullRequest
Новая
       21

Загрузить текстовый файл с помощью перетаскивания на Textarea

0 голосов
/ 03 ноября 2019

Я пытаюсь добавить возможность перетаскивать текстовый файл в текстовую область. Тем не менее я получаю следующую ошибку.

Uncaught TypeError: Не удалось выполнить readAsText для FileReader: параметр 1 не относится к типу Blob.

enter image description here

Что в соответствии со строкой ошибки 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>

1 Ответ

1 голос
/ 03 ноября 2019

Вы передаете файл в функцию 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>
...