параметр типа Blob''

Я написал код ниже, чтобы отобразить текст из локального файла с помощью API файла, но когда я нажимаю кнопку, ничего не происходит. Я получаю следующую ошибку, когда я Проинспектировать элемент в браузере. Что я делаю не так?

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

<!DOCTYPE html>
    <html>
    <body>

    <p>This example uses the addEventListener() method to attach a click event to a button.</p>

    <button id="myBtn">Try it</button>
    <pre id="file"></pre>

    <script>
    document.getElementById("myBtn").addEventListener("click", function(){
       var file = "test.txt"
       var reader = new FileReader();

       document.getElementById('file').innerText = reader.result;
   
       reader.readAsText(file);

    });
    </script>

    </body>
    </html>
9
fileapi html html5 javascript

3 ответов

сохранить содержимое файла в innerHtml, вы должны сначала прочитать файл. loadend событие возникает только тогда, когда файл полностью прочитан, и вы можете получить доступ к его содержимому без ошибок:

var reader = new FileReader();
var fileToRead = document.querySelector('input').files[0];

// attach event, that will be fired, when read is end
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
   // we insert content of file in DOM here
   document.getElementById('file').innerText = reader.result;
});

// start reading a loaded file
reader.readAsText(fileToRead);

вы можете подробнее здесь и здесь

1

вы сделали пару ошибок.

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

во-вторых, вы пытаетесь прочитать result свойство читателя до вы прочитали файл. Тебе нужно обработчик событий для этого (потому что чтение файлов, например Ajax, является асинхронным). 

document.getElementById("myBtn").addEventListener("click", function() {

  var reader = new FileReader();
  reader.addEventListener('load', function() {
    document.getElementById('file').innerText = this.result;
  });
  reader.readAsText(document.querySelector('input').files[0]);

});
<input type="file">
<button id="myBtn">Try it</button>
<pre id="file"></pre>
12

как говорили другие, я заметил, что событие onload-это то, чего не хватает.

Итак, у меня есть несколько разных способов показать, как заставить читателя что-то сделать, один для выполнения readAsText и один для получения данных в виде строки байта base64 с помощью readAsDataURL, что, на мой взгляд, лучше, так как вам не нужно беспокоиться о Unicode и других странных символах вопросительного знака. Чтобы увидеть их в действии, просто переверните вызов в слушателе между uploadFile(); и uploadFile1();. И я показываю несколько различных способов, которыми вы можете захватить объект file, а также:

document.getElementById("myBtn").addEventListener("click", function() {
  uploadFile1();
}); 

function uploadFile1(){
  var f = myInput.files[0];
  var reader = new FileReader();
  reader.onload = processFile(f);
  reader.readAsText(f); 
}

function uploadFile(){
  var f = document.querySelector('input').files[0];
  var reader = new FileReader();
  reader.onload = processFile(f);
  reader.readAsDataURL(f); 
}

function processFile(theFile){
  return function(e) { 
    // Use the .split I've included when calling this from uploadFile()
    var theBytes = e.target.result; //.split('base64,')[1]; 
    document.getElementById('file').innerText = theBytes;
  }
}
<input id="myInput" type="file">    
<button id="myBtn">Try it</button>
<span id="file"></span>

и обычно я думаю, вы должны быть в состоянии просто сделать:

<input type="button" onclick="uploadFile()" id="myBtn">Try it</button>

вместо того, чтобы добавлять этот слушатель, но по какой-то причине он не работал в JSFiddle.

https://jsfiddle.net/navyjax2/heLmxegn/1/

0