javascript - 我的 HTML 输入文件中的内容消失到了哪里？

Question

尝试通过 HTML FileReader 从文件中导入一些字符串对我来说开始很痛苦。经过测试，主函数内的警报显示事件完成后消失的内容。请赐教。

<input type="file" id="Open" />
<script type="text/javascript">
function readSingleFile(evt) {
  var f = evt.target.files[0]; 
  var r = new FileReader();
  var contents;
  if (f) {
      r.onloadend = function(evt) { 
        var contents = evt.target.result.substr();
        // this alert show string content
        alert(contents);
      }
      r.readAsText(f);
  }
  // there's no string content - (undefined)
  alert(contents);
}
document.getElementById('Open').addEventListener('change', readSingleFile, false);
</script>

Answer 1

该FileReader对象允许 Web 应用程序异步读取文件的内容。调用 r.readAsText(f) 后无法立即获取文件内容 您应该在onloadend evt函数中处理内容

像这样

<script type="text/javascript">
    var contents;

    function readSingleFile(evt) {
      var f = evt.target.files[0]; 
      var r = new FileReader();

      if (f) {
          r.onloadend = function(evt) { 
            contents = evt.target.result.substr();
            // this alert show string content
            alert(contents);

            //code for the contents
          }
          r.readAsText(f);
      }
      // there's no string content - (undefined)
      //alert(contents);
    }
    document.getElementById('Open').addEventListener('change', readSingleFile, false);
</script>