use*_*692 14 html javascript html5 fileapi
我编写了下面的代码,使用文件API显示本地文件中的文本,但是当我单击按钮时,没有任何反应.我在浏览器中检查元素时出现以下错误.我究竟做错了什么？
未捕获的TypeError:无法在'FileReader'上执行'readAsText':参数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>Que*_*tin 18
你犯了几个错误.
错误消息抱怨的是您尝试使用硬编码字符串选择文件.您无法确定加载哪个文件.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>要将文件内容保存到中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);