我已经编写了下面的代码,以使用文件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/

10-09 23:43