使用JavaScript在客户端将给定的文本文件字符串分配给变量_Javascript

使用JavaScript在客户端将给定的文本文件字符串分配给变量

javascript

使用JavaScript在客户端将给定的文本文件字符串分配给变量,javascript,Javascript,我试图创建一个几乎完全由客户端完成的项目，该项目使用函数读取给定的文本文件，并将文件内容（作为字符串）返回给变量。这些文件中的一些可能非常大，如果这对方法有任何影响的话。我想要一个功能，将执行像 // fileInputID is the input type='file' id var fileText = ReadTextFromFile('fileInputID'); 到目前为止，我有这样的东西，它不做我想要的，但它是我能得到的最接近的到目前为止 <!DOCTYPE html>

我试图创建一个几乎完全由客户端完成的项目，该项目使用函数读取给定的文本文件，并将文件内容（作为字符串）返回给变量。这些文件中的一些可能非常大，如果这对方法有任何影响的话。我想要一个功能，将执行像

// fileInputID is the input type='file' id
var fileText = ReadTextFromFile('fileInputID');

到目前为止，我有这样的东西，它不做我想要的，但它是我能得到的最接近的到目前为止

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <input type="file" id="xFile" value="Get Data">
    <script>
      // A non-blocking sleep function (I think)
      function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
      };
      async function ReadFile(fileInputID) {
        // Get the selected file from the input id.
        var file = document.getElementById(fileInputID).files[0];
        var str = "";
        var fileReader = new FileReader();
        fileReader.onloadend = function(evt) {
          str += fileReader.result;
        };
        // Read the file.
        fileReader.readAsText(file);
        // Wait for file to be completely read.
        do {
          await sleep(100);
        } while (fileReader.readyState != 2);
        console.log(str);         // Correctly prints the string.
        console.log(typeof str);  // Type of str is String.
        return str;               // OH NO! Doesn't send anything back?
      }
    </script>
    <div id="output"></div>
    <button id="output" onclick="var fileText = ReadTextFromFile('xFile'); console.log(fileText);"></button>
  </body>
</html>

是的，承诺是正确的方法，但投票有点难看。相反，只要做：

 function readFileFrom(fileInputID) {
   return new Promise((resolve, reject) => {
     var file = document.getElementById(fileInputID).files[0];
     var fileReader = new FileReader();
     fileReader.onloadend = function(evt) {
         resolve(fileReader.result);
      };
      // Read the file.
      fileReader.readAsText(file);
   });
 }

现在使用它，只需等待结果：

 (async function() {
   const fileText = await readFileFrom("id");
 })();

你用的是一个电话号码。这意味着对

ReadFile（）

的调用将返回一个承诺，如果函数中的代码返回，该承诺将被回调。但是，在您的情况下，只需将回调传递给

ReadFile（）

，而不必担心承诺

回调是一个函数，一旦计算完成，您将使用函数中的

str

变量调用该函数：

async function ReadFile(fileInputID, callback) {    
    //... folded for clarity    
    console.log(str);       // Correctly prints the string
    console.log(typeof str);
    callback(str); // call the callback with the computed value
}

ReadFile("xFile", function (txt) { 
   do_something_with_text(txt); 
});

一旦文件被读取，这将调用

do\u something\u和\u text

。在这一点上，您可以调用来更新您的DOM、大量AJAX调用等

使用这样的异步调用有很多好处（例如，您的站点在读取大文件时不会挂起等），但会增加复杂性。这是一个非常强大的范例。我希望这有帮助

谢谢你的快速回复！我真的很喜欢这种方法。不过，我现在得到一个错误

未捕获的SyntaxError:await仅在异步函数中有效

。我原以为向函数中添加

async

会无济于事。@bordenmike518

await

必须在一个异步函数中。让它与您的代码一起工作，并添加一点润滑脂！谢谢这难道不是一个回调吗？我看到的唯一问题是我不能轻易地去<代码>变量扩展数据=读取文件（'xFile'）；var yData=ReadFile（'yFile'）；绘图（扩展数据、yData）ReadFile（'xFile'，（xData）=>ReadFile（'yFile'，（yData）=>plot（xData，yData））。我认为@Jonas Wilms的解决方案要好得多。我来自Scheme和Lisp背景，Jonas的解决方案比Javascript更地道。@Jonas Wilms说得对！我不太熟悉你的解决方案比我的好得多。我也学到了一些东西。^^@Ashtowersdorf我真的很喜欢这个想法，并且正在学习很多东西我来自一个繁重的python背景，有一些C，C++，java，…

async function ReadFile(fileInputID, callback) {    
    //... folded for clarity    
    console.log(str);       // Correctly prints the string
    console.log(typeof str);
    callback(str); // call the callback with the computed value
}

ReadFile("xFile", function (txt) { 
   do_something_with_text(txt); 
});