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

Question

我期待一些文本数据（假设我加载.txt文件）显示在<p>元素中，但实际上没有传递任何内容。

＆＃13;

＆＃13;

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));
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

FileReader是异步的，因此您必须设置一个在读取数据后将调用的回调。此处readAsDataURL也不合适，您需要readAsText。

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

fileRead.readAsText(data);