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

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

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>

最佳答案

FileReader是异步的，因此您必须设置一个回调，一旦读取数据就将调用该回调。同样，readAsDataURL在这里不合适，您需要readAsText。

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

fileRead.readAsText(data);