如何从 FileReader() 输出值

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>

我有这个错误：

Uncaught ReferenceError: url_check is not defined

我的目标是 return 变量 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

由于您在 $(document).ready(function() ... 中声明了 url_check 变量，这意味着它只能在那里访问。一种解决方案是全局声明参数，以便函数的任何更改仍然可见。如果你想在分配变量后对它做些什么，你必须立即调用那里的函数。之前调用它可能会导致空结果，因为文件尚未处理。请参阅下面的 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

由于该函数是运行异步的，您应该考虑对 resolve/return 和 url_check 使用承诺或回调函数，以便在 readFile 函数之外访问它。

如果只是想把url_check的值log出来，console.log(url_check)必须放在readFile里面

如何从 FileReader() 输出值

How to output value from FileReader()

javascript

jquery

filereader