Question

我想知道如何从filereader（）函数获取值。

这是代码：

$(document).ready(function(){
    $('#file_input').on('change', function(e){
        readFile(this.files[0], function(e) {
            var txt = e.target.result
            var lines = txt.split("\n");
            var url_check = null;
            $.each(lines, function(n, data) {
                if (n == 0 && data != "") {
                    url_check = data
                }
            });
            $('#output_field').text(url_check);
        });
        console.log(url_check)
    });
});

function readFile(file, onLoadCallback){
    var reader = new FileReader();
    reader.onload = onLoadCallback;
    reader.readAsText(file);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file_input" type="file">
<div id="output_field"></div>

我有这个错误：

未捕获的ReferenceError：未定义url_check

我的目标是返回变量url_check，以便在readFile函数之外进行访问

我还尝试在readFile函数外部声明url_check，

$(document).ready(function(){
    $('#file_input').on('change', function(e){
        var url_check = null;
        readFile(this.files[0], function(e) {
            var txt = e.target.result
            var lines = txt.split("\n");
            $.each(lines, function(n, data) {
                if (n == 0 && data != "") {
                    url_check = data
                }
            });
            $('#output_field').text(url_check);
        });
        console.log(url_check)
    });
});

function readFile(file, onLoadCallback){
    var reader = new FileReader();
    reader.onload = onLoadCallback;
    reader.readAsText(file);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file_input" type="file">
<div id="output_field"></div>

Answer 1

由于您在url_check中声明了$(document).ready(function() ...变量，这意味着只能在该变量中访问它。一种解决方案是全局声明参数，以便对函数的任何更改仍然可见。如果要在分配变量后对它执行某些操作，则必须立即在此调用该函数。由于尚未处理文件，因此之前调用它可能会导致结果为空。请参阅下面的jsfiddle。我对它所做的任何事情都进行了测试。

$(document).ready(function() {
  $('#file_input').on('change', function(e) {
    readFile(this.files[0], function(e) {
      var txt = e.target.result
      var lines = txt.split("\n");
      
      if (lines && lines.length > 0)
        url_check = lines[0];
      
      $('#output_field').text(url_check);
      console.log(url_check);
      callbackPrint();
    });
  });
});

var url_check = null;

function readFile(file, onLoadCallback) {
  var reader = new FileReader();
  reader.onload = onLoadCallback;
  reader.readAsText(file);
}

function callbackPrint() {
  console.log("From testPrint: " + url_check);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="file_input" type="file">
<div id="output_field"></div>

Answer 2

由于该函数是异步运行的，因此您应考虑使用promise或回调函数来解析/返回url_check，以便在readFile函数之外对其进行访问。

如果您只想记录url_check out的值，console.log(url_check)必须放在readFile内

如何从FileReader（）输出值

2 个答案: