Question

我正在尝试创建一个几乎完全客户端的项目，该项目使用功能读取给定的文本文件，并将文件的内容（作为字符串）返回给变量。如果对方法有任何影响，则其中一些文件可能会非常非常大。我想要一个执行类似...的功能

// 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>

我真的不想不必将其发送到服务器，而只是将其再次发送回。另外，我希望它保留返回的函数，而不是尝试将其保存到全局变量，以便它可以保持更动态。任何想法都会有很大帮助。

真的想最终得到类似...的东西

var xData = ReadTextFromFile('xFile');   
var yData = ReadTextFromFile('yFile');   
plot(xData, yData);

Answer 1

是的，诺言是正确的方法，但是轮询有点丑陋。而是这样做：

 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");
 })();

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

1 个答案: