Question

在服务器上，有一个文本文件。在客户端上使用JavaScript，我希望能够读取此文件并进行处理。无法更改服务器上文件的格式。

如何将文件内容转换为JavaScript变量，以便进行此处理？文件的大小最大可达3.5 MB，但它可以很容易地处理成100行（1行是50-100个字符）的块。

该文件的所有内容都不应对用户可见;他将在文件中看到处理数据的结果。

Answer 1

您可以使用隐藏框架，在其中加载文件并解析其内容。

HTML：

<iframe id="frmFile" src="test.txt" onload="LoadFile();" style="display: none;"></iframe>

JavaScript的：

<script type="text/javascript">
function LoadFile() {
    var oFrame = document.getElementById("frmFile");
    var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
    while (strRawContents.indexOf("\r") >= 0)
        strRawContents = strRawContents.replace("\r", "");
    var arrLines = strRawContents.split("\n");
    alert("File " + oFrame.src + " has " + arrLines.length + " lines");
    for (var i = 0; i < arrLines.length; i++) {
        var curLine = arrLines[i];
        alert("Line #" + (i + 1) + " is: '" + curLine + "'");
    }
}
</script>

注意：为了使其在Chrome浏览器中运行，您应该使用 - allow-file-access-from-files 标志启动它。 <子> credit

Answer 2

加载那一大块数据并不是一个好计划，但是如果必须的话，这里是使用jQuery's $.ajax()函数如何做到这一点的大纲。

<html><head>
<script src="jquery.js"></script>
<script>
getTxt = function (){

  $.ajax({
    url:'text.txt',
    success: function (data){
      //parse your data here
      //you can split into lines using data.split('\n') 
      //an use regex functions to effectively parse it
    }
  });
}
</script>
</head><body>
  <button type="button" id="btnGetTxt" onclick="getTxt()">Get Text</button>
</body></html>

Answer 3

您需要使用Ajax，它基本上是向服务器发送请求，然后获取一个JSON对象，您将其转换为JavaScript对象。

检查一下：

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

如果您使用的是jQuery库，则可以更加轻松：

http://api.jquery.com/jQuery.ajax/

话虽如此，我强烈建议您不要将3.5MB的文件下载到JS中！这不是一个好主意。在服务器上进行处理，然后在处理后返回数据。然后，如果要获取新数据，请发送新的Ajax请求，在服务器上处理请求，然后返回新数据。

希望有所帮助。

Answer 4

我使用了拉菲德关于使用AJAX的建议。

这对我有用：

var url = "http://www.example.com/file.json";

var jsonFile = new XMLHttpRequest();
    jsonFile.open("GET",url,true);
    jsonFile.send();

    jsonFile.onreadystatechange = function() {
        if (jsonFile.readyState== 4 && jsonFile.status == 200) {
            document.getElementById("id-of-element").innerHTML = jsonFile.responseText;
        }
     }

我基本上（几乎字面意思地）从http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get2复制了这段代码，因此可以归功于他们。

我不知道它是如何工作的，但你不必知道你的刹车如何使用它们;）

希望这有帮助！

Answer 5

只有一点，我看到一些使用innerhtml的答案。我曾提出过类似的想法，但决定不这样做。在最新版本的react版本中，同一过程现在称为危险地innerhtml，因为您可以通过在应用程序中显示html来让客户端进入操作系统。这可能导致各种攻击以及SQL注入尝试

Answer 6

您需要检查状态0（当使用XMLHttpRequest在本地加载文件时，您没有获得状态，如果它来自Web服务器则返回状态）

function readTextFile(file) {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function ()
{
    if(rawFile.readyState === 4)
    {
        if(rawFile.status === 200 || rawFile.status == 0)
        {
            var allText = rawFile.responseText;
            alert(allText);
        }
    }
}
rawFile.send(null);

}

对于设备文件读取，请使用：

readTextFile（ “文件：/// C：/your/path/to/file.txt”）;

从服务器使用中读取文件：

readTextFile（ “http://test/file.txt”）;

Answer 7

似乎XMLHttpRequest已被Fetch API取代。 Google发布了一个不错的introduction，其中包含该示例可以做您想要的事情：

fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

但是，您可能想调用response.text()而不是response.json()。

Answer 8

我真的认为你以错误的方式解决这个问题。试图下载并解析+ 3Mb文本文件是完全疯狂的。为什么不在服务器端解析文件，将结果viva和ORM存储到数据库（您的选择，SQL很好，但它还取决于内容键值数据在CouchDB之类的东西上工作得更好）然后使用ajax解析数据在客户端。

另外，如果可能的话，更好的想法是完全跳过文本文件以获得更好的性能。

如何使用JavaScript从服务器读取文本文件？

8 个答案: