Question

我正在尝试创建一个非常简单的网页，该网页接收输入文件并在控制台中显示内容。当我尝试使用它时，它有点有用，但总是落后一步。例如，

1）上传＆＃34; 1.txt＆＃34; - ＆GT;控制台打印＆＃34;＆＃34;

2）上传＆＃34; 2.txt＆＃34; - ＆GT;控制台打印＆＃34; 1.txt＆＃34;

的内容

3）上传＆＃34; 3.txt＆＃34; - ＆GT;控制台打印＆＃34; 2.txt＆＃34;

的内容

...

＆＃13;

function readData(){
  var fileholder = document.querySelector('#knotFiles');
  var content = 'Empty';
  var reader = new FileReader();
  reader.onload = function(event){
    content = event.target.result;
  }
  fileholder.addEventListener("input", function(event) {
    var files = fileholder.files;
    reader.readAsText(files[0]);
    console.log(content);
  }, false);
  return content;
};

readData();

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="" />
    <title></title>
  </head>
  <body>
    <div id="container">
      <input type="file" id="knotFiles" multiple>
    </div>
    <script src="knot.js">
    </script>
  </body>
</html>

＆＃13;

我是javascript和web开发的新手，所以我很抱歉这是一个简单的问题。谢谢！

Answer 1

render.onload是一个async函数排序content = event.target.result;将在最后执行，因此console.log(content);放在render.onload内，以便content中的最新更改数据

function readData(){
  var fileholder = document.querySelector('#knotFiles');
  var content = 'Empty';
  var reader = new FileReader();
  reader.onload = function(event){
    content = event.target.result;
    console.log(content);
  }
  fileholder.addEventListener("input", function(event) {
    var files = fileholder.files;
    reader.readAsText(files[0]);

  }, false);
  return content;
};

readData();

Answer 2

FileReader()异步加载 - 您输出的是之前的结果，因为变量content在事件侦听器回调触发之前尚未更新。像这样改写：

var fileholder = document.querySelector('#knotFiles');
fileholder.addEventListener("input", function(event) {
    readData();
}, false);

function readData(){  
    var content = '';
    var files = fileholder.files;
    var reader = new FileReader();
    reader.readAsText(files[0], "UTF-8"); // assumed this encoding
    reader.onload = function(event){
        content = event.target.result;
        console.log(content);
        return content;
    };
}

＆＃34;变更＆＃34;事件落后于javascript

2 个答案: