параметр не относится к типу 'Blob'

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

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

источник

2015-11-25 user3293692

'TypeOf файл == "строка" // true' – Jonathan

-1

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

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);

Вы можете прочитать больше here - и here

источник

2015-11-25 19:44:37

Это происходит потому, что ошибки' blob' не определено. – Quentin

Что делать, если вы хотите прочитать его в переменной? Должно ли мы явно выгружать его в innerText? – CromeX

Вы сделали несколько ошибок.

Тот, с которым жалуется сообщение об ошибке, заключается в том, что вы пытаетесь выбрать файл с использованием строчной кодированной строки. Вы не можете определить, какой файл загружается. Файл 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>

источник

2015-11-25 19:53:25 Quentin

ответ

Смежные вопросы