Question

我编写了下面的代码，使用文件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>

Answer 1

你犯了几个错误。

错误消息抱怨的是您尝试使用硬编码字符串选择文件。 您无法确定加载哪个文件。 File API只允许您通过文件输入读取用户选择的文件。

第二个是您在读取文件之前尝试阅读读者的result属性。您需要一个事件处理程序来执行此操作（因为文件读取（如Ajax）是异步的）。

＆＃13;
＆＃13;
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]); });
＆＃13;
<input type="file"> <button id="myBtn">Try it</button> <pre id="file"></pre>
＆＃13;
＆＃13;
＆＃13;

Answer 2

要在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

Answer 3

正如其他人所说，我注意到onload事件是缺失的。

所以我有两种不同的方式来展示如何让读者做一些事情，一个用于执行readAsText，一个用于使用readAsDataURL将数据作为base64字节字符串获取，这是更好的是，在我看来，因为你不必担心Unicode和其他奇怪的问号字符。要查看它们的实际效果，只需在uploadFile();和uploadFile1();之间的监听器中拨打电话即可。我还提供了几种不同的方法来获取文件对象：

document.getElementById("myBtn").addEventListener("click", function() {
  uploadFile1();
}); 

function uploadFile1(){
  var f = myInput.files[0];
  var reader = new FileReader();
  reader.onload = processFile(f);
  reader.readAsText(f); 
}

function uploadFile(){
  var f = document.querySelector('input').files[0];
  var reader = new FileReader();
  reader.onload = processFile(f);
  reader.readAsDataURL(f); 
}

function processFile(theFile){
  return function(e) { 
    // Use the .split I've included when calling this from uploadFile()
    var theBytes = e.target.result; //.split('base64,')[1]; 
    document.getElementById('file').innerText = theBytes;
  }
}

<input id="myInput" type="file">    
<button id="myBtn">Try it</button>
<span id="file"></span>

通常我认为你应该能够做到：

<input type="button" onclick="uploadFile()" id="myBtn">Try it</button>

而不是必须添加该侦听器，但由于某种原因它在JSFiddle中不起作用。

https://jsfiddle.net/navyjax2/heLmxegn/1/

Answer 4

好吧！不确定其他对象，但就我而言，它是通过使用fileObjects [0] .file

解决的

查看它的一个好方法是在控制台中打印“文件”或“ fileObjects”，然后最后查看是否需要.file。

参数不是'Blob'类型

4 个答案: