我已经编写了下面的代码,以使用文件API显示本地文件中的文本,但是当我单击按钮时,什么也没有发生。在浏览器中检查元素时,出现以下错误。我究竟做错了什么?
<!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>
最佳答案
要将文件内容保存在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);
您可以阅读更多here-和here
关于javascript - 参数不是 'Blob'类型,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33923985/