参数不是'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事件触发，只有当文件被完全readed，你可以没有错误访问其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

你已经做了几个错误。

错误消息抱怨的是您试图使用硬编码字符串选择文件。 您无法确定哪个文件被加载。 File 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

参数不是'Blob'类型

回答

相关问题