没有数据通过Javascript中的FileReader传递

Question

I'm expecting some text data (given I load a .txt file) to be shown in the <p> element but nothing is actually passed.

 function showData() { var file = document.getElementById('myFile'); var data = file.files[0]; var fileRead = new FileReader(); fileRead.readAsDataURL(data); document.getElementById('out').appendChild(document.createTextNode(' ' + fileRead.result)); } 

 <p id = "out">The content of the file is</p> <input type = "file" id = "myFile" style="margin-top:5%;"> <button id = "show" onclick="showData()">The result is</button> 

Answer 1

FileReader is asynchronous, therefore you have to set up a callback that will be invoked once the data has been read. Also readAsDataURL is not appropriate here, you want readAsText .

fileRead.onload = function() {
      document.getElementById('out').appendChild(document.createTextNode(' ' + fileRead.result));
}

fileRead.readAsText(data);